import { type ComponentPropsWithoutRef } from 'react';
import { Tabs as RTabs } from 'radix-ui';
import { cx } from '../utils';

export const Tabs = RTabs.Root;

export const TabsList = ({
  items,
  className,
  ...props
}: { items: Array<{ value: string; label: string }> } & Omit<
  ComponentPropsWithoutRef<typeof RTabs.List>,
  'children'
>) => (
  <RTabs.List className={cx('modern-sk-tabs', className)} {...props}>
    {items.map((it) => (
      <RTabs.Trigger
        key={it.value}
        value={it.value}
        className="modern-sk-tabs__trigger"
      >
        {it.label}
      </RTabs.Trigger>
    ))}
  </RTabs.List>
);

export const TabsContent = RTabs.Content;