import React from "react";
import { View, Pressable, useColorScheme } from "react-native";
import { Text } from "@/components/ui/text";

interface EmptyStateProps {
  title: string;
  description?: string;
  hint?: string;
  actionLabel?: string;
  onActionPress?: () => void;
  previewLines?: number;
}

export function EmptyState({
  title,
  description,
  hint,
  actionLabel,
  onActionPress,
  previewLines = 3,
}: EmptyStateProps) {
  const scheme = useColorScheme();
  const isDark = scheme === "dark";

  const dashColor = isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.14)";
  const lineFill = isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.08)";

  return (
    <View className="w-full">
      <View className="bg-card border border-border/20 rounded-2xl p-5">
        <View className="mb-4">
          <Text variant="h3" className="text-foreground font-bold">
            {title}
          </Text>
          {!!description && (
            <Text variant="muted" className="mt-1">
              {description}
            </Text>
          )}
        </View>

        <View
          className="rounded-xl p-4"
          style={{ borderWidth: 1, borderStyle: "dashed", borderColor: dashColor }}
        >
          <View className="gap-3">
            {Array.from({ length: Math.max(1, previewLines) }).map((_, idx) => (
              <View
                key={idx}
                className="rounded-md"
                style={{
                  height: 12,
                  width: `${idx === 0 ? 90 : idx === 1 ? 72 : 80}%`,
                  backgroundColor: lineFill,
                }}
              />
            ))}
          </View>

          {!!hint && (
            <Text variant="muted" className="mt-4">
              {hint}
            </Text>
          )}
        </View>

        {!!actionLabel && !!onActionPress && (
          <Pressable
            onPress={onActionPress}
            className="mt-5 bg-primary h-10 rounded-[6px]  items-center justify-center"
          >
            <Text className="text-white text-sm font-bold">{actionLabel}</Text>
          </Pressable>
        )}
      </View>
    </View>
  );
}