import React from "react";

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs/tabs";
import { useBreakpoints } from "@/hooks/useBreakpoints";

export interface TabPaymentOptionProps {
  firstTabTitle: string;
  secondTabTitle: string;
  firstTab: React.ReactNode;
  secondTab: React.ReactNode;
  defaultValue: string;
  setActiveTab: (value: string) => void;
}

const TabPaymentOption = (props: TabPaymentOptionProps) => {
  const { isDesktop } = useBreakpoints();
  return (
    <Tabs value={props.defaultValue} className="bg-transparent">
      <TabsList className={`bg-transparent ${isDesktop ? "" : "w-[90%]"}`}>
        <TabsTrigger
          onClick={() => props.setActiveTab("1")}
          className="h-[34px] w-[160px] rounded-primary !border border-gray-200 bg-white text-black  data-[state=active]:border-none data-[state=active]:bg-primary-500 data-[state=active]:text-white"
          value="1"
        >
          {props.firstTabTitle}
        </TabsTrigger>
        <TabsTrigger
          onClick={() => props.setActiveTab("2")}
          className="h-[34px] w-[200px] rounded-primary !border border-gray-200 bg-white text-black data-[state=active]:border-none data-[state=active]:bg-primary-500 data-[state=active]:text-white"
          value="2"
        >
          {props.secondTabTitle}
        </TabsTrigger>
      </TabsList>
      <TabsContent value="1">{props.firstTab}</TabsContent>
      <TabsContent value="2">{props.secondTab}</TabsContent>
    </Tabs>
  );
};

export { TabPaymentOption };