import * as React from 'react';
import { cn } from '../../lib/utils';

export function Tabs<T extends string>(props: {
  value: T;
  tabs: Array<{ value: T; label: string; icon?: React.ReactNode }>;
  onValueChange: (value: T) => void;
  className?: string;
}) {
  return (
    <div className={cn('shTabs', props.className)} role="tablist">
      {props.tabs.map((tab) => (
        <button
          type="button"
          className="shTab"
          data-active={props.value === tab.value}
          key={tab.value}
          onClick={() => props.onValueChange(tab.value)}
        >
          {tab.icon}
          <span>{tab.label}</span>
        </button>
      ))}
    </div>
  );
}
