import { Tabs, TabsList, TabsTrigger } from '@workspace/airo-ui/components/tabs';
import { cn } from '@workspace/airo-ui/lib/utils';
import { useTranslations } from 'next-intl';
import React from 'react';

export type TabValueType = 'year' | 'month';
interface PlanTabProps {
  tabValue: TabValueType;
  setTabValue: (val: TabValueType) => void;
  discount: number;
  className?: string;
}

const PlanTabs: React.FC<PlanTabProps> = (props) => {
  const t = useTranslations('components.offerDialog');
  const { tabValue, className } = props;
  const TAB_LIST: { label: string; value: TabValueType }[] = [
    {
      label: t('yearlyPlan'),
      value: 'year',
    },
    {
      label: t('monthlyPlan'),
      value: 'month',
    },
  ];

  return (
    <Tabs
      defaultValue='year'
      className={cn('mt-8 w-full text-center md:mt-8', className)}
      value={tabValue}
      onValueChange={(value) => props.setTabValue(value as 'year' | 'month')}
    >
      <TabsList className='relative mb-8 grid h-auto grid-cols-2 flex-wrap rounded-full bg-[#EAEAEA] px-2.5 py-2'>
        {tabValue === 'year' ? (
          <span className='absolute -top-7 left-16 z-10 rounded-sm bg-[#E22C2E] px-3 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
            -{props.discount}%{/* 小三角箭头 */}
            <span
              className='absolute right-0 top-[75%] h-10 w-2 bg-[#E22C2E]'
              style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}
            />
          </span>
        ) : null}
        {TAB_LIST.map((val, key) => (
          <TabsTrigger
            key={val.value}
            className={
              'rounded-full py-2 text-base text-[#0F2C53] data-[state=active]:bg-[#0F2C53] data-[state=active]:text-white md:px-12'
            }
            value={val.value}
          >
            {val.label}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  );
};
export default PlanTabs;