import React from "react";
import Heading from "../UI/Heading";
import { Close } from "../UI/Icon";
import Text from "../UI/Text";
import { purchaseGuideIndex } from "./ContentSidebar.types";

const ContentSidebarIndex = ({
  indexData,
  setIndexOpend,
}: {
  indexData: purchaseGuideIndex[];
  setIndexOpend?: (indexStatus: boolean) => void;
}) => {
  return (
    <div className="w-[32.3rem] border-[1px] border-gray-3 rounded-[10px] p-[2rem] bg-white z-[200] absolute top-0 right-[13.2rem]">
      <div className="flex items-center justify-between mb-[2rem]">
        <Heading level={4} className="text-gray-10">
          목차
        </Heading>
        <button
          onClick={() => {
            setIndexOpend && setIndexOpend(false);
          }}
        >
          <Close size="2rem" />
        </button>
      </div>
      <div className="space-y-[2rem] cursor-pointer">
        {indexData.map((data, i: number) => {
          return <IndexBox key={`purchaseGuideIndex_${i}`} data={data} />;
        })}
      </div>
    </div>
  );
};

export default ContentSidebarIndex;

const IndexBox = ({ data }: { data: purchaseGuideIndex }) => {
  const { title, desc, onClickIndex } = data;
  return (
    <div
      onClick={() => {
        onClickIndex && onClickIndex();
      }}
    >
      <div className="w-full h-[1px] bg-gray-3"></div>
      <div className="mt-[2rem]">
        <Heading level={6} className="text-gray-10">
          {title}
        </Heading>
        <Text type="B10" className="text-gray-10">
          {desc}
        </Text>
      </div>
    </div>
  );
};