import React from 'react';
import { IconType } from 'react-icons';

interface TabProps {
  id: string;
  label: string;
  icon: IconType;
  children: React.ReactNode;
}

interface TabsProps {
  value: string;
  onChange: (value: string) => void;
  children: React.ReactElement<TabProps>[];
}

export function Tabs({ value, onChange, children }: TabsProps) {
  return (
    <div>
      <div className="border-b border-gray-200">
        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
          {children.map((tab) => (
            <button
              key={tab.props.id}
              onClick={() => onChange(tab.props.id)}
              className={`
                flex items-center gap-2 border-b-2 px-1 py-4 text-sm font-medium
                ${
                  value === tab.props.id
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
                }
              `}
            >
              <tab.props.icon className="h-5 w-5" />
              {tab.props.label}
            </button>
          ))}
        </nav>
      </div>
      <div className="mt-4">
        {children.find((tab) => tab.props.id === value)?.props.children}
      </div>
    </div>
  );
}

export function Tab({ children }: TabProps) {
  return <>{children}</>;
}