import { Ionicons } from "@expo/vector-icons";
import { View } from "react-native";
import { Button } from "@/components/ui/Button";
import { Text } from "@/components/ui/Text";
import { colors } from "@/lib/theme";

export function EmptyState({
  icon = "cube-outline",
  title,
  body,
  actionTitle,
  onAction,
  compact,
}: {
  icon?: keyof typeof Ionicons.glyphMap;
  title: string;
  body?: string;
  actionTitle?: string;
  onAction?: () => void;
  compact?: boolean;
}) {
  return (
    <View
      style={{
        alignItems: "center",
        paddingVertical: compact ? 32 : 56,
        paddingHorizontal: 24,
      }}
    >
      <View
        style={{
          width: 72,
          height: 72,
          borderRadius: 36,
          backgroundColor: colors.brandSoft,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Ionicons name={icon} size={32} color={colors.brandText} />
      </View>
      <Text variant="h2" center style={{ marginTop: 18 }}>
        {title}
      </Text>
      {body ? (
        <Text variant="bodySm" color={colors.subtle} center style={{ marginTop: 6, maxWidth: 280 }}>
          {body}
        </Text>
      ) : null}
      {actionTitle && onAction ? (
        <Button
          title={actionTitle}
          onPress={onAction}
          size="md"
          fullWidth={false}
          style={{ marginTop: 20 }}
        />
      ) : null}
    </View>
  );
}