import { FormButton } from "@/app/components/form/forms";
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import SizeCalculatorMen from "@/app/components/sizechart/size-calculator-men";
import SizeCalculatorWomen from "@/app/components/sizechart/size-calculator-women";
import type { StepComponentProps } from "../wizardTypes";

export default function RecommendMeasurement({ jumpToNext }: StepComponentProps) {
  return (
    <>
      <div className="mx-auto flex w-full flex-col items-center justify-center gap-2 text-center md:w-[50%]">
        <h2 className="font-light">Size recommendation (optional)</h2>
        <p className="text-sm font-light">
          Set in your height and weight to get your recommended size. It{"'"}s a
          helpful starting point before we dive into the next step.
        </p>
      </div>

      <div className="cc-vision-wrap">
        <div className="ccvision-scrollcontent">
          <div className="mx-auto flex w-full flex-col md:w-[50%]">
            <TabGroup className="flex w-full flex-col">
              <div className="flex w-full items-end justify-between">
                <TabList className="font-bogart flex w-full flex-row gap-4 text-xl [&>button]:border-b-2 [&>button]:border-transparent [&>button]:pt-4 [&>button]:outline-none [&>button]:data-[selected]:border-b-teal-600 [&>button]:data-[selected]:text-teal-600">
                  <Tab>Men</Tab>
                  <Tab>Women</Tab>
                </TabList>
                <div className="flex w-full flex-col justify-end text-right text-xs/3.5 text-gray-950">
                  <span>1in = 2.54cm</span>
                  <span>1kg = 2.2lbs</span>
                </div>
              </div>
              <div className="relative mt-2 flex w-full overflow-hidden">
                <div className="relative z-20 flex w-full pt-10">
                  <TabPanels className="flex w-full flex-col">
                    <TabPanel>
                      <SizeCalculatorMen />
                    </TabPanel>
                    <TabPanel>
                      <SizeCalculatorWomen />
                    </TabPanel>
                  </TabPanels>
                </div>
              </div>
            </TabGroup>
          </div>
        </div>
        <div className="ccBottomBtnWrap">
          <FormButton
            id="btn_cc_save_standard_size"
            label="Save Size"
            type="submit"
            color="gray"
            hairline="blue"
            onClick={() => jumpToNext?.()}
          />
        </div>
      </div>
    </>
  );
}