import React from "react";
import {
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from "react-native";

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

interface StylePickerProps {
  options: string[];
  value: string;
  onChange: (v: string) => void;
  style?: ViewStyle;
}

export function StylePicker({
  options,
  value,
  onChange,
  style,
}: StylePickerProps) {
  const colors = useColors();
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.row}
      style={style}
    >
      {options.map((opt) => {
        const active = opt === value;
        return (
          <Pressable
            key={opt}
            onPress={() => onChange(opt)}
            style={({ pressed }) => [
              styles.chip,
              {
                backgroundColor: active ? colors.primary : colors.elevated,
                borderColor: active ? colors.primary : colors.borderStrong,
                opacity: pressed ? 0.85 : 1,
              },
            ]}
          >
            <Text
              style={{
                color: active ? colors.primaryForeground : colors.text,
                fontFamily: active ? sansSemibold : sansMedium,
                fontSize: 13,
              }}
            >
              {opt}
            </Text>
          </Pressable>
        );
      })}
      <View style={{ width: 16 }} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: {
    paddingHorizontal: 20,
    gap: 8,
    paddingVertical: 4,
  },
  chip: {
    paddingHorizontal: 14,
    height: 36,
    borderRadius: 999,
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});