import type { CollapseProps } from "antd";
import { Collapse } from "antd";
import Text from "../text";
import Title from "../tools/title";

const FaqTexts: CollapseProps["items"] = [
  {
    key: "1",
    showArrow: false,
    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
    label: (
      <div className="text-black text-2xl font-[600]">
        <Text txt="faq1" />
      </div>
    ),
    children: (
      <div className="pl-5 text-gray-500 text-[16px]">
        <Text txt="faq-answer-1" />
      </div>
    ),
  },
  {
    key: "2",
    showArrow: false,
    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
    label: (
      <div className="text-black text-2xl font-[600]">
        <Text txt="faq2" />
      </div>
    ),
    children: (
      <div className="pl-5 text-gray-500 text-[16px]">
        <Text txt="faq-answer-2" />
      </div>
    ),
  },
  {
    key: "3",
    showArrow: false,
    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-10",
    label: (
      <div className="text-black text-2xl font-[600]">
        <Text txt="faq3" />
      </div>
    ),
    children: (
      <div className="pl-5 text-gray-500 text-[16px]">
        <p className="mb-3">
          <Text txt="faq-answer-3" />
        </p>
        <ul className="pl-4 flex flex-col gap-2">
          <li className="flex items-center justify-end gap-3">
            <Text txt="faq-answer-3-1" />
            <span className="w-[8px] h-[8px] bg-gray-500 rounded-[50%]"></span>
          </li>
          <li className="flex items-center justify-end gap-3">
            <Text txt="faq-answer-3-2" />
            <span className="w-[8px] h-[8px] bg-gray-500 rounded-[50%]"></span>
          </li>
          <li className="flex items-center justify-end gap-3">
            <Text txt="faq-answer-3-3" />
            <span className="w-[8px] h-[8px] bg-gray-500 rounded-[50%]"></span>
          </li>
        </ul>
      </div>
    ),
  },
  {
    key: "4",
    showArrow: false,
    className: "!border-[3px] !border-secondary !rounded-[15px] p-5 mb-5",
    label: (
      <div className="text-black text-2xl font-[600]">
        <Text txt="faq4" />
      </div>
    ),
    children: (
      <div className="pl-5 text-gray-500 text-[16px]">
        <Text txt="faq-answer-4" />
      </div>
    ),
  },
];

export default function Faq() {
  return (
    <div className="max-w-[1200px] w-full mx-auto text-left  mb-30">
      <div className="mb-10">
        <Title text="faq-h2" />
      </div>
      <div>
        <Collapse
          ghost
          accordion
          className="border-[3px] border-b-[3px] bg-white border-secondary rounded-[50px] mb-5"
          items={FaqTexts}
          bordered={false}
          defaultActiveKey={["1"]}
        />
      </div>
    </div>
  );
}