import { useTranslation } from "react-i18next";

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

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

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

  return (
    <Modal
      className="w-full max-w-67.5 flex flex-col items-center gap-2"
      open={open}
      onClose={onClose}
      title={t("support.title")}
    >
      <ContentSurface className="w-full rounded-4xl">
        <LightSurface className="rounded-4xl py-1 px-2 font-bold text-lg text-center">
          {t("support.text")}
        </LightSurface>
      </ContentSurface>
      <Button variant="blue" className="w-11/12">
        {t("support.action")}
      </Button>
    </Modal>
  );
}
