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 SizeChartMen from "../components/sizechart/sizeChartMen";
import SizeChartWomen from "../components/sizechart/sizeChartWomen";

export default function SizeChart() {
  return (
    <>
      <div className="mob-noise flex flex-col pt-15">
        <div className="wrapper">
          <div className="mx-auto flex w-full flex-col pt-5 md:w-[50%]">
            <div className="flex w-full flex-col items-center justify-center">
              <div className="font-macropolo text-4xl uppercase">
                Size Guide
              </div>
              <p className="text-sm">Calculate your body fit</p>
            </div>

            <div className="mt-4 flex w-full flex-col p-2 pb-10">
              <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>
      </div>
      <div className="wrapper">
        <div className="flex flex-col py-10">
          <TabGroup>
            <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-gray-950 [&>button]:data-[selected]:text-gray-950">
              <Tab>Men</Tab>
              <Tab>Women</Tab>
            </TabList>
            <TabPanels>
              <TabPanel>
                <SizeChartMen />
              </TabPanel>
              <TabPanel>
                <SizeChartWomen />
              </TabPanel>
            </TabPanels>
          </TabGroup>
        </div>
      </div>
    </>
  );
}