import { Button } from "antd";
import InfoMessageIcon from "components/Icons/InfoMessageIcon";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProText from "../ProText";
import ProTitle from "../ProTitle";

interface InfoButtonSheetProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  description: string;
}

export function InfoButtonSheet({
  isOpen,
  onClose,
  title,
  description,
}: InfoButtonSheetProps) {
  const { t } = useTranslation();
  const handleSave = () => {
    onClose();
  };

  const handleCancel = () => {
    onClose();
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={title}
      showCloseButton={false}
      initialSnap={1}
      height={"50vh"}
      snapPoints={["50vh"]}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <InfoMessageIcon />
        <ProTitle level={5}>{title}</ProTitle>
        <ProText type="secondary" style={{textAlign:"center"}}>{description}</ProText>
      </div>
      <br />
      <Button type="primary" style={{ width: "100%", boxShadow: "none", height: 48 }} onClick={handleSave}>
        {t("address.gotIt")}
      </Button>
    </ProBottomSheet>
  );
}