import { useTranslation } from "react-i18next";

import Modal from "@components/modals/Modal";
import ContentSurface from "@components/surface/ContentSurface";
import LightSurface from "@components/surface/LightSurface";

type Props = {
  open: boolean;
  onClose: () => void;
};

export default function FAQModal({ open, onClose }: Props) {
  const { t } = useTranslation();

  return (
    <Modal className="w-full max-w-67.5" open={open} onClose={onClose} title={t("settings.faq")}>
      <ContentSurface className="w-full rounded-4xl">
        <LightSurface className="w-full rounded-4xl p-2.5 font-bold text-lg text-center">
          <p>{t("faq.1q")}</p>
          <p className="text-[#83552E]">{t("faq.1a")}</p>
        </LightSurface>
      </ContentSurface>
      <ContentSurface className="w-full rounded-4xl">
        <LightSurface className="w-full rounded-4xl p-2.5 font-bold text-lg text-center">
          <p>{t("faq.1q")}</p>
          <p className="text-[#83552E]">{t("faq.1a")}</p>
        </LightSurface>
      </ContentSurface>
      <ContentSurface className="w-full rounded-4xl">
        <LightSurface className="w-full rounded-4xl p-2.5 font-bold text-lg text-center">
          <p>{t("faq.1q")}</p>
          <p className="text-[#83552E]">{t("faq.1a")}</p>
        </LightSurface>
      </ContentSurface>
      <ContentSurface className="w-full rounded-4xl">
        <LightSurface className="w-full rounded-4xl p-2.5 font-bold text-lg text-center">
          <p>{t("faq.1q")}</p>
          <p className="text-[#83552E]">{t("faq.1a")}</p>
        </LightSurface>
      </ContentSurface>
    </Modal>
  );
}
