import { Pressable, StyleSheet, Text } from "react-native";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { Category } from "../types/domain";

interface CategoryPillProps {
  category: Category;
  active?: boolean;
  onPress: () => void;
}

export function CategoryPill({ category, active = false, onPress }: CategoryPillProps) {
  const Icon = category.icon;
  const foreground = active ? colors.surface : colors.ink;

  return (
    <Pressable
      accessibilityRole="button"
      onPress={onPress}
      style={({ pressed }) => [styles.container, active && styles.active, pressed && styles.pressed]}
    >
      <Icon color={foreground} size={18} strokeWidth={2.4} />
      <Text style={[styles.label, { color: foreground }]} numberOfLines={1}>
        {category.label}
      </Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    minHeight: 42,
    borderRadius: radius.pill,
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.surface,
    paddingHorizontal: spacing.md,
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.sm
  },
  active: {
    borderColor: colors.primary,
    backgroundColor: colors.primary
  },
  pressed: {
    opacity: 0.78
  },
  label: {
    fontSize: 13,
    fontWeight: "800"
  }
});