import { Link, type Href } from 'expo-router';
import { Pressable, Text, View } from 'react-native';

import { UI } from '@/constants/uiTheme';

export type EmptyStateProps = {
  title: string;
  description?: string;
  actionLabel?: string;
  actionHref?: Href;
  onAction?: () => void;
};

export function EmptyState({ title, description, actionLabel, actionHref, onAction }: EmptyStateProps) {
  const actionNode =
    actionLabel && actionHref != null ? (
      <Link href={actionHref} asChild>
        <Pressable
          accessibilityRole="button"
          className="mt-6 min-h-[52px] w-full max-w-sm items-center justify-center rounded-2xl px-5 active:opacity-90"
          style={{ backgroundColor: UI.primary }}
        >
          <Text className="text-center text-lg font-semibold text-white">{actionLabel}</Text>
        </Pressable>
      </Link>
    ) : actionLabel && onAction ? (
      <Pressable
        accessibilityRole="button"
        onPress={onAction}
        className="mt-6 min-h-[52px] w-full max-w-sm items-center justify-center rounded-2xl px-5 active:opacity-90"
        style={{ backgroundColor: UI.primary }}
      >
        <Text className="text-center text-lg font-semibold text-white">{actionLabel}</Text>
      </Pressable>
    ) : null;

  return (
    <View className="items-center justify-center px-5 py-10">
      <Text
        className="text-center text-xl font-bold leading-7"
        style={{ color: UI.text }}
        accessibilityRole="header"
      >
        {title}
      </Text>
      {description ? (
        <Text
          className="mt-3 max-w-sm text-center text-base leading-6"
          style={{ color: UI.textMuted }}
        >
          {description}
        </Text>
      ) : null}
      {actionNode}
    </View>
  );
}