"use client";

import {
  Dialog,
  DialogBody,
  DialogFooter,
  DialogHeader,
  Typography,
} from "@material-tailwind/react";
import React, { useState } from "react";

import shippingIcon from "../../public/img/shippingIcon.png";
// import { _useScopedI18n } from '../i18n/client';
import ButtonCustom from "./Button";
import CustomNextImage from "./CustomNextImage";

export function PhoneShippingDialog() {
  //
  // const scopeT = _useScopedI18n('sharedComponents.buySubscriptionComponent');

  const [open, setOpen] = useState(true);
  const handleClose = () => setOpen(!open);

  return (
    <>
      <Dialog
        open={open}
        handler={handleClose}
        size="xs"
        className="md:!max-w-[500px] md:!min-w-[500px] p-0"
      >
        <DialogHeader className="phoneShippingBG w-full rounded-tl-lg rounded-tr-lg p-8 pb-14">
          <div className="flex flex-col items-center md:w-1/2 mx-auto">
            <CustomNextImage
              src={shippingIcon.src}
              alt="SessionIcon"
              width={80}
              height={80}
            />
            <Typography
              variant="h3"
              className="text-base md:text-xl font-semibold text-white text-center uppercase"
            >
              Gen 1 Phones Ready for Shipping!
            </Typography>
          </div>
        </DialogHeader>

        <DialogBody className="text-sm  md:text-base text-slate-400 font-medium text-center pt-0">
          <Typography
            variant="h5"
            className="text-sm md:text-xl font-medium text-black-500 mb-3"
          >
            Great news!
          </Typography>

          <Typography
            variant="h5"
            className="text-sm md:text-base font-medium text-black-400"
          >
            The Gen 1 phones you ordered are now ready to ship. Please proceed
            to the Legacy Order Page to complete your delivery payment and
            initiate shipping.
          </Typography>
        </DialogBody>
        <DialogFooter className="gap-5 justify-end items-end">
          <ButtonCustom icon={undefined} variant="text" onClick={handleClose}>
            Cancel
          </ButtonCustom>
          <ButtonCustom icon={undefined} onClick={handleClose}>
            Proceed
          </ButtonCustom>
        </DialogFooter>
      </Dialog>
    </>
  );
}
