import React from 'react';
import {FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {colors, typography} from '../../utils/colors';

interface Props {
  genres: string[];
  selected: string | null;
  onSelect: (genre: string | null) => void;
}

export default function CatalogFilter({genres, selected, onSelect}: Props) {
  return (
    <FlatList
      data={['All', ...genres]}
      horizontal
      showsHorizontalScrollIndicator={false}
      keyExtractor={g => g}
      contentContainerStyle={styles.list}
      renderItem={({item}) => {
        const isActive = item === 'All' ? selected === null : selected === item;
        return (
          <TouchableOpacity
            style={[styles.chip, isActive && styles.chipActive]}
            onPress={() => onSelect(item === 'All' ? null : item)}>
            <Text style={[styles.chipText, isActive && styles.chipTextActive]}>
              {item}
            </Text>
          </TouchableOpacity>
        );
      }}
    />
  );
}

const styles = StyleSheet.create({
  list: {paddingHorizontal: 16, paddingBottom: 12, gap: 8},
  chip: {
    paddingHorizontal: 14,
    paddingVertical: 7,
    borderRadius: 20,
    backgroundColor: colors.surfaceLight,
    marginRight: 8,
  },
  chipActive: {backgroundColor: colors.primary},
  chipText: {...typography.caption, color: colors.textSecondary},
  chipTextActive: {color: colors.textPrimary, fontWeight: '600'},
});