import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
import { ChevronDown } from 'lucide-react-native';
import { COLORS, SPACING, RADIUS, FONT_WEIGHTS } from '../../theme/colors';

interface Props {
  onPress: () => void;
  expanded: boolean;
  label: string;
  /** Optional leading icon node (defaults to none). */
  leading?: React.ReactNode;
}

export default function CollapseButton({ onPress, expanded, label, leading }: Props) {
  return (
    <TouchableOpacity onPress={onPress} activeOpacity={0.7} style={styles.btn}>
      <View style={styles.left}>
        {leading}
        <Text style={styles.label}>{label}</Text>
      </View>
      <View style={[styles.chevron, expanded && styles.chevronExpanded]}>
        <ChevronDown size={14} color="rgba(255,255,255,0.6)" strokeWidth={2.5} />
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  btn: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    paddingHorizontal: 18,
    backgroundColor: 'rgba(255,255,255,0.022)',
    borderRadius: RADIUS.xl,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.05)',
    marginBottom: SPACING.sm,
  },
  left: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    flex: 1,
  },
  label: {
    fontSize: 13,
    fontWeight: FONT_WEIGHTS.medium,
    color: 'rgba(255,255,255,0.75)',
    letterSpacing: -0.05,
  },
  chevron: {
    transform: [{ rotate: '0deg' }],
  },
  chevronExpanded: {
    transform: [{ rotate: '180deg' }],
  },
});