import * as React from 'react'
import { cn } from '@/lib/utils'

export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
  icon?: React.ReactNode
  title: React.ReactNode
  description?: React.ReactNode
  action?: React.ReactNode
}

export function EmptyState({
  className,
  icon,
  title,
  description,
  action,
  ...props
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center text-center py-12 px-6 gap-3',
        'rounded-lg border border-dashed border-line bg-surface-2/40',
        className,
      )}
      {...props}
    >
      {icon && <div className="text-mute [&>svg]:size-8">{icon}</div>}
      <div className="space-y-1">
        <div className="text-title-md text-ink">{title}</div>
        {description && <div className="text-body text-ink-2 max-w-md">{description}</div>}
      </div>
      {action && <div className="mt-2">{action}</div>}
    </div>
  )
}
