import type { ReactNode } from 'react'

import clsx from 'clsx'

import ConsumerButton from '@/components/consumer/ConsumerButton'
import CloseCircleIcon from '@/components/icons/CloseCircleIcon'
import FileQuestionIcon from '@/components/icons/FileQuestionIcon'

interface ConsumerStateProps {
  actionLabel?: string
  children?: ReactNode
  className?: string
  description?: string
  icon?: ReactNode
  title: string
  variant?: 'empty' | 'error'
  onAction?: () => void
}

const ConsumerState = ({ actionLabel, children, className, description, icon, title, variant = 'empty', onAction }: ConsumerStateProps) => {
  const isError = variant === 'error'

  return (
    <div
      className={clsx('consumer-empty-state', className)}
      role={isError ? 'alert' : 'status'}
    >
      <span
        aria-hidden
        className={clsx(
          'flex size-14 items-center justify-center rounded-2xl border',
          isError ? 'border-fourth-100 bg-fourth-100 text-fourth-900' : 'border-primary-100 bg-primary-50 text-primary-500'
        )}
      >
        {icon ?? (isError ? <CloseCircleIcon className="size-6" /> : <FileQuestionIcon className="size-7" />)}
      </span>
      <div>
        <p className="text-sm font-bold text-consumer-text sm:text-base">{title}</p>
        {description ? <p className="mt-1 max-w-sm text-xs leading-6 text-secondary-20">{description}</p> : null}
      </div>
      {actionLabel && onAction ? (
        <ConsumerButton
          className="mt-1"
          fill={isError ? 'none' : 'orange'}
          textColor={isError ? 'text-fourth-900' : undefined}
          onClick={onAction}
        >
          {actionLabel}
        </ConsumerButton>
      ) : null}
      {children}
    </div>
  )
}

export default ConsumerState