import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'

type Props = {
  title: string
  expanded: boolean
  onClick: () => void
}

const ExpandableHeader: React.FC<Props> = ({ title, expanded, onClick }) => (
  <button onClick={onClick} className="flex items-center justify-between px-2">
    <h2 className="pl-1 text-xs font-bold leading-[12px] text-gray-400">
      {title}
    </h2>
    <div className="mr-2">
      {expanded ? (
        <ChevronDownIcon width={12} height={12} color="#6B7280" />
      ) : (
        <ChevronUpIcon width={12} height={12} color="#6B7280" />
      )}
    </div>
  </button>
)

export default ExpandableHeader