/* eslint-disable react/no-danger */
import { useBoolean } from "usehooks-ts";

import Card from "@/components/ui/card/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible/collapsible";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { useLocale } from "@/hooks/useLocale";

interface CoreSummaryCollapseInformationProps {
  title: string;
  description: string;
}

const CoreSummaryCollapseInformation = (
  props: CoreSummaryCollapseInformationProps,
) => {
  const collapseBoolean = useBoolean(false);
  const { t } = useLocale();
  return (
    <Card className="!bg-[#F9FAFB]">
      <Collapsible
        open={collapseBoolean.value}
        onOpenChange={collapseBoolean.setValue}
      >
        <CollapsibleTrigger className="!bg-dark-100 flex w-full  justify-between text-sm font-semibold data-[state=open]:border-b data-[state=open]:pb-4">
          <div className="flex items-center gap-2">
            <LIcon name="Check" size={18} />
            {props.title}
          </div>
          <LIcon
            name={collapseBoolean.value ? "ChevronUp" : "ChevronDown"}
            size={18}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className="mt-4">
          <div
            className="!text-xs"
            dangerouslySetInnerHTML={{ __html: props.description }}
          />
          <div className="mt-4 flex gap-2">
            <LIcon name="Info" color="#667085" size={16} />
            <p className="text-xs text-gray-800">
              {t("No refunds will be made for no-shows or early departures.")}
            </p>
          </div>
        </CollapsibleContent>
      </Collapsible>
    </Card>
  );
};

export default CoreSummaryCollapseInformation;