import { motion } from "framer-motion";
import TelModalHeader from "../ui/tel-modal/tel-modal-header";
import TelModalPlanInfo from "../ui/tel-modal/tel-modal-plan-info";
import { fadeInOut } from "@/utils/variants";
import TelModalPinForm from "../ui/tel-modal/tel-modal-pin-form";

const PinModal = () => {
  return (
    <motion.div
      className="w-[min(90%,56.25rem)] rounded-lg max-h-[90dvh] overflow-hidden text-center grid grid-rows-[auto_1fr]"
      {...fadeInOut()}
    >
      <TelModalHeader>
        <TelModalPlanInfo />
      </TelModalHeader>
      <motion.div className="bg-white overflow-hidden pl-6 py-1.5" layout>
        <div className="overflow-auto mawdy-scrollbar mr-1 pr-5 h-full py-8 md:py-[min(6vh,4.375rem)]">
          <TelModalPinForm />
        </div>
      </motion.div>
    </motion.div>
  );
};

export default PinModal;