import { Feather } from "@expo/vector-icons";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

import { sansMedium, sansSemibold } from "@/constants/typography";
import { useColors } from "@/hooks/useColors";

interface EmptyStateProps {
  icon?: React.ComponentProps<typeof Feather>["name"];
  title: string;
  caption?: string;
}

export function EmptyState({ icon = "inbox", title, caption }: EmptyStateProps) {
  const colors = useColors();
  return (
    <View style={styles.wrap}>
      <View
        style={[
          styles.iconWrap,
          { backgroundColor: colors.elevated, borderColor: colors.border },
        ]}
      >
        <Feather name={icon} size={22} color={colors.mutedForeground} />
      </View>
      <Text
        style={{
          color: colors.text,
          fontFamily: sansSemibold,
          fontSize: 15,
          marginTop: 12,
        }}
      >
        {title}
      </Text>
      {caption ? (
        <Text
          style={{
            color: colors.mutedForeground,
            fontFamily: sansMedium,
            fontSize: 13,
            marginTop: 4,
            textAlign: "center",
          }}
        >
          {caption}
        </Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    alignItems: "center",
    paddingVertical: 24,
    paddingHorizontal: 24,
  },
  iconWrap: {
    width: 48,
    height: 48,
    borderRadius: 14,
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});