import { ChevronDownIcon, ChevronUpIcon, QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import { useTranslations } from "next-intl";
import { FC, ReactNode } from "react";

export const InfoBox: FC<{
  children: ReactNode;
  title?: string;
}> = ({ children, title }) => {

    const t = useTranslations("info-box");

  return (
    <details className="group border border-gray-800 rounded-lg p-2 mb-1 w-[17rem] sm:w-[28rem]">
      <summary className="flex cursor-pointer items-center justify-between">
        <span className="font-bold"><QuestionMarkCircleIcon className="w-6 h-6 inline mr-1 mt-[-.3em] text-green-300" /> {title ?? t("default-title")}</span>
        <span className="ml-2 text-sm text-gray-500 group-open:hidden"><ChevronDownIcon className="w-5 h-5 inline" /></span>
        <span className="ml-2 text-sm text-gray-500 hidden group-open:inline"><ChevronUpIcon className="w-5 h-5 inline" /></span>
      </summary>
      <div className="mt-2 italic text-sm text-gray-400 group-open:animate-[animateDown_0.2s_linear_forwards]">{children}</div>
    </details>
  )
}