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

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

interface StudioModeCardProps {
  icon: React.ComponentProps<typeof Feather>["name"];
  title: string;
  caption: string;
  badge?: string;
  tone?: "default" | "primary";
  onPress?: () => void;
}

export function StudioModeCard({
  icon,
  title,
  caption,
  badge,
  tone = "default",
  onPress,
}: StudioModeCardProps) {
  const colors = useColors();
  const isPrimary = tone === "primary";
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.card,
        {
          backgroundColor: isPrimary ? colors.primary : colors.card,
          borderColor: isPrimary ? colors.primary : colors.border,
          opacity: pressed ? 0.9 : 1,
          transform: [{ scale: pressed ? 0.99 : 1 }],
        },
      ]}
    >
      <View style={styles.iconRow}>
        <View
          style={[
            styles.iconWrap,
            {
              backgroundColor: isPrimary
                ? "rgba(10,11,15,0.18)"
                : colors.elevated,
            },
          ]}
        >
          <Feather
            name={icon}
            size={18}
            color={isPrimary ? colors.primaryForeground : colors.text}
          />
        </View>
        {badge ? (
          <View
            style={[
              styles.badge,
              {
                backgroundColor: isPrimary
                  ? "rgba(10,11,15,0.18)"
                  : colors.elevated,
              },
            ]}
          >
            <Text
              style={{
                color: isPrimary ? colors.primaryForeground : colors.primary,
                fontFamily: sansSemibold,
                fontSize: 10,
                letterSpacing: 0.6,
                textTransform: "uppercase",
              }}
            >
              {badge}
            </Text>
          </View>
        ) : null}
      </View>
      <View style={{ marginTop: 18 }}>
        <Text
          style={{
            color: isPrimary ? colors.primaryForeground : colors.text,
            fontFamily: sansSemibold,
            fontSize: 16,
            letterSpacing: -0.3,
          }}
        >
          {title}
        </Text>
        <Text
          style={{
            color: isPrimary
              ? "rgba(10,11,15,0.72)"
              : colors.mutedForeground,
            fontFamily: sansMedium,
            fontSize: 12,
            marginTop: 4,
            lineHeight: 17,
          }}
        >
          {caption}
        </Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 18,
    borderWidth: 1,
    padding: 16,
    minHeight: 130,
    flex: 1,
    justifyContent: "space-between",
  },
  iconRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  iconWrap: {
    width: 36,
    height: 36,
    borderRadius: 12,
    alignItems: "center",
    justifyContent: "center",
  },
  badge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 999,
  },
});