"use client";

import * as RadixTabs from "@radix-ui/react-tabs";
import { ReactNode } from "react";

export type TabProps = {
  tabList: {
    name: string;
    content: ReactNode;
  }[];
  defaultTab: string;
};

export default function Tabs({ tabList, defaultTab }: TabProps) {
  return (
    <RadixTabs.Root defaultValue={defaultTab}>
      <RadixTabs.List>
        <div>
          {tabList.map((item) => (
            <RadixTabs.Trigger
              key={item.name}
              value={item.name}
              className="fl-px-4 fl-py-2 fl-my-1 fl-bg-light fl-data-[state=active]:bg-primary fl-data-[state=active]:text-white fl-hover:bg-dark fl-hover:text-white fl-data-[state=active]:hover:bg-dark fl-first:rounded-l-md fl-last:rounded-r-md"
            >
              {item.name}
            </RadixTabs.Trigger>
          ))}
        </div>
        {tabList.map((item) => (
          <RadixTabs.Content
            key={item.name}
            value={item.name}
            className="fl-bg-light fl-rounded-md fl-p-8 fl-my-1"
          >
            {item.content}
          </RadixTabs.Content>
        ))}
      </RadixTabs.List>
    </RadixTabs.Root>
  );
}