import { Building2Icon } from 'lucide-react'

/**
 * نشان «پروژه فعال» هیرو — آیکون و متن کنار هم، با فاصلهٔ یکنواخت و
 * چیدمان وسط‌چین. فلکس‌باکس ستون را از بین می‌برد تا فاصلهٔ آیکون و متن
 * یکدست بماند و آیکون درست با متن هم‌تراز شود.
 */
export function HeroProjectBadge({ value, label }: { value: string; label: string }) {
  return (
    <div className="flex items-center gap-3.5 text-center">
      {/* آیکون در کادر مربعی با نشان زندهٔ مسی */}
      <span className="relative flex h-14 w-14 shrink-0 items-center justify-center rounded-xl border border-copper/40 bg-copper/10">
        <Building2Icon className="h-6 w-6 text-copper" aria-hidden="true" />
        <span className="absolute -end-1 -top-1 flex h-3 w-3" aria-hidden="true">
          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-copper opacity-60" />
          <span className="relative inline-flex h-3 w-3 rounded-full border border-ink bg-copper" />
        </span>
      </span>

      <div className="flex flex-col items-center">
        {value && <p className="font-mono text-[2.5rem] font-bold leading-none tracking-tight text-copper">{value}</p>}
        <p className={`text-center text-[15px] font-light leading-7 text-ivory/85 ${value ? 'mt-2' : ''}`}>{label}</p>
      </div>
    </div>
  )
}