import { View } from 'react-native';

import { Icon } from '../../atoms/Icon';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

import type { EmptyStateProps } from './EmptyState.types';

export function EmptyState({
  icon = 'info',
  title,
  description,
  action,
  className,
}: EmptyStateProps) {
  return (
    <View
      accessibilityRole="summary"
      className={cn('items-center justify-center gap-2 px-6 py-10', className)}
    >
      <View className="rounded-full bg-content2 p-3">
        <Icon name={icon} size={28} className="text-muted-foreground" />
      </View>
      <Text variant="subtitleLarge" className="text-center text-foreground">
        {title}
      </Text>
      {description ? (
        <Text variant="bodyMedium" tone="muted" className="text-center">
          {description}
        </Text>
      ) : null}
      {action ? <View className="mt-3">{action}</View> : null}
    </View>
  );
}