import React, { useState } from 'react';
import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';

interface ICollapsibleProps {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
  className?: string;
}

export const Collapsible: React.FC<ICollapsibleProps> = ({
  title,
  children,
  defaultOpen = false,
  className,
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <Container className={className}>
      <Header onClick={() => setIsOpen(!isOpen)}>
        <Title>{title}</Title>
        <Icon>{isOpen ? <FaChevronUp /> : <FaChevronDown />}</Icon>
      </Header>
      {isOpen && <Content>{children}</Content>}
    </Container>
  );
};

const Container = styled.div`
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid ${uiColors.darkGray};
`;

const Header = styled.div`
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 0.2s ease;

  &:hover {
    background: rgba(0, 0, 0, 0.4);
  }
`;

const Title = styled.h3`
  margin: 0;
  font-size: 0.6rem;
  color: ${uiColors.yellow};
  font-family: 'Press Start 2P', cursive;
  letter-spacing: 0.5px;
`;

const Icon = styled.span`
  color: ${uiColors.yellow};
  font-size: 0.6rem;
  display: flex;
  align-items: center;
`;

const Content = styled.div`
  padding: 6px;
`;
