import { ChevronDown, ChevronUp } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Stack } from './Stack';
import { Text } from './Text';

interface AccordionProps {
  title: string;
  icon: ReactNode;
  children: ReactNode;
  isOpen: boolean;
  onToggle: () => void;
}

export function Accordion({ title, icon, children, isOpen, onToggle }: AccordionProps) {
  return (
    <Box border={true} borderColor="border-charcoal-outline" rounded="lg" overflow="hidden" bg="bg-iron-gray/30">
      <Box
        as="button"
        onClick={onToggle}
        display="flex"
        alignItems="center"
        justifyContent="between"
        px={3}
        py={2}
        fullWidth
        className="hover:bg-iron-gray/50 transition-colors"
      >
        <Stack direction="row" align="center" gap={2}>
          {icon}
          <Text size="xs" weight="semibold" color="text-gray-400" uppercase letterSpacing="wide">
            {title}
          </Text>
        </Stack>
        <Icon icon={isOpen ? ChevronDown : ChevronUp} size={4} color="text-gray-400" />
      </Box>
      
      {isOpen && (
        <Box p={3} borderTop={true} borderColor="border-charcoal-outline">
          {children}
        </Box>
      )}
    </Box>
  );
}