import React from "react";
import { TextLinkNew } from "@/app/components/button";
import SizeCalculatorMen from "@/app/components/sizechart/size-calculator-men";

type SizeModalProps = {
  isOpen: boolean;
  onClose: () => void;
};

export default function ProductSizeModal({ isOpen, onClose }: SizeModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed top-0 left-0 z-50 h-screen w-screen bg-gray-950/20 backdrop-blur-sm">
      <div className="flex h-full w-full items-center justify-center">
        <div className="flex w-[90%] flex-col bg-white p-5 md:w-[40%]">
          <div className="flex items-end justify-end">
            <button className="btn-link" onClick={onClose}>
              Close
            </button>
          </div>

          <div>
            <div className="flex w-full flex-col p-10 pt-20">
              <SizeCalculatorMen />
            </div>
            <div className="mx-auto flex w-full flex-col items-center justify-center gap-4 pb-10 md:w-[75%]">
              <div className="flex flex-col items-center justify-center gap-2 text-center text-xs">
                if you don{"'"}t find your size, you can add your custom
                measurement here.
                <div>
                  <button className="btn-outline w-40">Add Now</button>
                </div>
              </div>
              or
              <TextLinkNew
                id="link_size_chart_detail"
                href="/size-chart"
                label="Detailed size guide"
                color="gray"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}