import type { HTMLAttributes, PropsWithChildren } from 'react';
import { useState } from 'react';

interface DropdownProps {
  align: 'left' | 'right';
}

export default function Dropdown({
  align,
  children,
  ...props
}: PropsWithChildren<DropdownProps> & HTMLAttributes<HTMLDivElement>) {
  const [open, setOpen] = useState(false);

  return (
    <div
      {...props}
      className='dropdown-container'
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      {open ? '▲' : '▼'}
      <div className={`dropdown ${align} ${open ? 'open' : ''}`}>{children}</div>
    </div>
  );
}