import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Button } from './Button';
import { spacing } from '../lib/theme';

interface ButtonGridProps {
  options: { value: string; label: string; icon?: React.ReactNode }[];
  selectedValue: string;
  onSelect: (value: string) => void;
  columns?: number;
}

export const ButtonGrid: React.FC<ButtonGridProps> = ({
  options,
  selectedValue,
  onSelect,
  columns = 2,
}) => {
  return (
    <View style={styles.container}>
      {options.map(option => (
        <View key={option.value} style={[styles.buttonWrapper, { width: `${100 / columns}%` }]}>
          <Button
            title={option.label}
            icon={option.icon}
            onPress={() => onSelect(option.value)}
            variant={selectedValue === option.value ? 'primary' : 'outline'}
            size="sm"
          />
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginHorizontal: -spacing.xs / 2,
  },
  buttonWrapper: {
    padding: spacing.xs / 2,
  },
});
