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

export interface AccordionProps {
  title: string;
  children: ReactNode;
  defaultOpen?: boolean;
}

export const Accordion = ({ 
  title, 
  children, 
  defaultOpen = false 
}: AccordionProps) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <Surface variant="muted" rounded="lg" style={{ border: '1px solid var(--ui-color-border-default)', overflow: 'hidden' }}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between px-4 py-3 hover:bg-white/5 transition-colors"
      >
        <Text weight="bold" size="sm" variant="high">
          {title}
        </Text>
        <Icon icon={isOpen ? ChevronUp : ChevronDown} size={4} intent="low" />
      </button>
      
      {isOpen && (
        <Box padding={4} borderTop>
          {children}
        </Box>
      )}
    </Surface>
  );
};