import * as React from 'react'

import { cn } from './utils'

/* ------------------------------------------------------------------ */
/*  EmptyState                                                         */
/* ------------------------------------------------------------------ */

export interface EmptyStateProps extends React.ComponentProps<'div'> {
  /** Icon element displayed above the title */
  icon?: React.ReactNode
  /** Primary heading text */
  title: string
  /** Secondary description text */
  description?: string
  /** Action button configuration */
  action?: {
    label: string
    onClick: () => void
  }
}

function EmptyState({
  className,
  icon,
  title,
  description,
  action,
  children,
  ...props
}: EmptyStateProps) {
  return (
    <div
      data-slot="empty-state"
      className={cn('flex flex-col items-center justify-center px-6 py-12 text-center', className)}
      {...props}
    >
      {icon && (
        <div className="mb-4 text-foreground-muted [&>svg]:size-12 [&>svg]:stroke-1">{icon}</div>
      )}
      <h3 className="text-base font-semibold text-foreground">{title}</h3>
      {description && (
        <p className="mt-1.5 max-w-sm text-sm text-foreground-secondary">{description}</p>
      )}
      {action && (
        <div className="mt-5">
          <button
            type="button"
            onClick={action.onClick}
            className={cn(
              'inline-flex items-center justify-center gap-2 rounded-xl px-[18px] py-[10px] text-[13px] font-semibold transition-all duration-[250ms]',
              'bg-primary text-primary-foreground shadow-glow hover:bg-primary/90 hover:-translate-y-0.5'
            )}
          >
            {action.label}
          </button>
        </div>
      )}
      {children && <div className="mt-5">{children}</div>}
    </div>
  )
}

export { EmptyState }
