import Link from 'next/link'

interface AccountEmptyStateProps {
  title: string
  description?: string
  actionLabel?: string
  actionHref?: string
}

export function AccountEmptyState({ title, description, actionLabel, actionHref }: AccountEmptyStateProps) {
  return (
    <section className="grid min-h-[calc(100vh-320px)] place-items-center px-6 py-12 text-center">
      <div className="max-w-[360px]">
        <svg viewBox="0 0 260 180" className="mx-auto h-[180px] w-[260px]" role="img" aria-label="空状态插画">
          <rect x="34" y="44" width="192" height="104" rx="4" fill="#f4f8fc" stroke="#dbe4ef" strokeWidth="2" />
          <path d="M58 72h78M58 94h126M58 116h92" stroke="#b9c8d9" strokeWidth="8" strokeLinecap="round" />
          <rect x="154" y="68" width="46" height="36" rx="4" fill="#ffffff" stroke="#cbd8e6" strokeWidth="2" />
          <path d="M165 88l8 7 17-18" fill="none" stroke="#0a3a78" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="62" cy="142" r="14" fill="#e7f0fb" />
          <circle cx="202" cy="42" r="12" fill="#e7f0fb" />
          <path d="M37 154h188" stroke="#dbe4ef" strokeWidth="3" strokeLinecap="round" />
          <path d="M82 30c14-12 32-12 46 0M150 154c14-11 35-11 50 0" stroke="#8fb0d6" strokeWidth="3" strokeLinecap="round" fill="none" />
        </svg>
        <h2 className="mt-1 text-xl font-extrabold text-ink">{title}</h2>
        {description && <p className="mt-3 text-sm font-bold leading-7 text-muted">{description}</p>}
        {actionLabel && actionHref && (
          <Link href={actionHref} className="mt-6 inline-flex h-10 items-center justify-center rounded-[4px] bg-brand px-5 text-sm font-extrabold text-white hover:bg-brand-dark">
            {actionLabel}
          </Link>
        )}
      </div>
    </section>
  )
}
