// components/EmptyState.tsx
import React, { ReactNode } from "react"

import Stack from "../molecules/stack"
import Text from "../molecules/text"

interface EmptyStateProps {
  description: string
  icon: ReactNode
  title: string
  children?: ReactNode
}

interface IconProps {
  icon: ReactNode
}

const EmptyStateRoot: React.FC<EmptyStateProps> = ({
  description,
  icon,
  title,
  children,
}) => {
  return (
    <Stack
      flex={1}
      p={4}
      gap={2}
      alignCenter
      justifyCenter
      role="region"
      aria-label="Empty State"
    >
      <div role="img" aria-label="Empty State Icon">
        {icon}
      </div>
      <Text as="h3" className="text-center" aria-label="Title">
        {title}
      </Text>
      <Text
        as="p"
        className="text-center text-gray-500"
        aria-label="Description"
      >
        {description}
      </Text>
      {children && (
        <Stack
          role="navigation"
          aria-label="Additional Actions"
          flex={1}
          row
          gap={4}
          p={4}
          alignCenter
        >
          {children}
        </Stack>
      )}
    </Stack>
  )
}

const EmptyStateIcon: React.FC<IconProps> = ({ icon }) => {
  return (
    <div role="img" aria-label="Icon" className="mb-4 rounded-md border p-4">
      {icon}
    </div>
  )
}

export { EmptyStateRoot, EmptyStateIcon }