"use client";

import { useState } from "react";

import { Button } from "@shared/components/button";
import { Checklist } from "@shared/components/checklist";
import { Collapse } from "@shared/components/collapse";
import { MaterialIcon } from "@shared/components/material-icon";
import { SeeMoreProps } from "@shared/components/see-more/types";

export const SeeMore: React.FC<SeeMoreProps> = props => {
  const { list, text } = props;
  const [showDetails, setShowDetails] = useState<boolean>(true);
  return (
    <div className="mt-3">
      <Button
        type="button"
        className="flex items-center gap-2 text-base font-semibold text-gray-900"
        aria-expanded={showDetails}
        onClick={e => {
          e.stopPropagation();
          setShowDetails(v => !v);
        }}
      >
        <span>{text || "See details"}</span>
        <MaterialIcon
          name={showDetails ? "keyboard_arrow_down" : "keyboard_arrow_up"}
          fill={1}
          size={24}
        />
      </Button>

      <Collapse open={showDetails}>
        <div className="pt-1">
          <Checklist listItemClassName="body3" items={list} />
        </div>
      </Collapse>
    </div>
  );
};

SeeMore.displayName = "SeeMore";

export type { SeeMoreProps };