import { useState } from 'react';

/** @deprecated Usar `Tabs` (estilo Anima / alta-edición). Se mantiene para demos con `content` embebido. */
export const TabsLegacy = ({
  items = [],
  defaultTab = 0,
  onChange,
  variant = 'default',
  className = '',
  ...props
}) => {
  const [activeTab, setActiveTab] = useState(defaultTab);

  const handleTabChange = (index) => {
    setActiveTab(index);
    onChange?.(index);
  };

  const activeClasses = {
    default: 'border-blue-500 text-blue-600',
    underline: 'border-blue-500 text-blue-600 border-b-2',
  };

  if (items.length === 0) return null;

  return (
    <div className={className} {...props}>
      <div className="border-b border-gray-200">
        <nav className="flex -mb-px space-x-8" aria-label="Tabs">
          {items.map((item, index) => (
            <button
              key={index}
              type="button"
              onClick={() => handleTabChange(index)}
              className={`
                whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm
                transition-colors
                ${
                  activeTab === index
                    ? activeClasses[variant]
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }
              `}
            >
              {item.label}
            </button>
          ))}
        </nav>
      </div>
      <div className="mt-4">{items[activeTab]?.content}</div>
    </div>
  );
};

export default TabsLegacy;
