import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import React from 'react';
import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { QuickChip } from './types';

interface QuickChipsProps {
  chips: QuickChip[];
}

const QuickChips: React.FC<QuickChipsProps> = ({ chips }) => {
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme ?? 'light'];

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      style={styles.chipsRowScroll}
      contentContainerStyle={styles.chipsRow}
    >
      {chips.map((chip) => (
        <TouchableOpacity
          key={chip.key}
          style={[
            styles.chip,
            {
              borderColor: theme.primary,
              backgroundColor: 'transparent',
            }
          ]}
          onPress={chip.action}
        >
          <Text style={[styles.chipText, { color: theme.primary }]}>
            {chip.label}
          </Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  chipsRowScroll: {
    marginBottom: 8,
  },
  chipsRow: {
    flexDirection: 'row',
    gap: 8,
    paddingHorizontal: 6,
  },
  chip: {
    paddingHorizontal: 10,
    height: 34,
    borderRadius: 18,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  chipText: {
    fontSize: 13,
    fontWeight: '600',
  },
});

export default QuickChips;