import { useRef } from 'react';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';

type TabsProps = {
  tabList: { value: string; label: string }[];
  activeTab: string;
  setActiveTab: (tab: string) => void;
};
const TabsComponent = (props: TabsProps) => {
  const { tabList, activeTab, setActiveTab } = props;
  const tabsListRef = useRef<HTMLDivElement>(null);
  return (
    <div>
      <div className="hidden lg:inline-block">
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList
            ref={tabsListRef}
            className="bg-muted text-muted-foreground inline-flex !h-auto items-center rounded-md p-1"
          >
            {tabList.map((filter) => (
              <TabsTrigger
                key={filter.value}
                value={filter.value}
                className={[
                  'rounded-md !px-5 !py-2 text-sm font-medium transition-all',
                  'text-muted-foreground hover:bg-muted hover:text-foreground',
                  'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
                  'leading-normal ring-0 focus-visible:ring-0',
                ].join(' ')}
              >
                {filter.label}
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
      </div>
      <div className="block lg:hidden">
        <Select value={activeTab} onValueChange={(v) => setActiveTab(v)}>
          <SelectTrigger className="w-40">
            <SelectValue placeholder="Filter" />
          </SelectTrigger>
          <SelectContent>
            {tabList.map((f) => (
              <SelectItem key={f.value} value={f.value}>
                {f.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
};

export { TabsComponent as Tabs };