import type { ReactNode } from 'react'

import { cn } from '@/lib/cn'

/**
 * The empty state.
 *
 * Treated as a designed surface rather than an afterthought: a seller's first
 * visit to their portfolio, and a search that finds nothing, are both empty
 * states, and both are moments where the product either explains the next step
 * or loses the person.
 */
export function EmptyState({
  icon,
  title,
  description,
  action,
  className,
}: {
  icon?: ReactNode
  title: string
  description?: string
  action?: ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center rounded-xl border border-dashed border-border-subtle bg-surface px-6 py-14 text-center',
        className,
      )}
    >
      {icon !== undefined && (
        <div
          aria-hidden
          className="mb-4 flex size-11 items-center justify-center rounded-lg border border-border-subtle bg-surface-sunken text-text-muted"
        >
          {icon}
        </div>
      )}

      <h3 className="text-base font-semibold text-text-primary">{title}</h3>

      {description !== undefined && (
        <p className="mt-1.5 max-w-md text-sm text-text-secondary">{description}</p>
      )}

      {action !== undefined && <div className="mt-5">{action}</div>}
    </div>
  )
}
