import React from 'react';
import { Card } from '../Card';

export interface TabItem {
  id: string;
  label: string;
  disabled?: boolean;
}

export interface TabsProps {
  items: TabItem[];
  activeTab: string;
  onTabChange: (tabId: string) => void;
  variant?: 'default' | 'pills' | 'underline';
  size?: 'sm' | 'md' | 'lg';
  fullWidth?: boolean;
  className?: string;
}

const Tabs: React.FC<TabsProps> = ({
  items,
  activeTab,
  onTabChange,
  variant = 'pills',
  size = 'md',
  fullWidth = false,
  className = ''
}) => {
  // Size classes
  const sizeClasses = {
    sm: 'px-2 py-1.5 text-xs',
    md: 'px-3 sm:px-4 py-3 sm:py-2 text-sm',
    lg: 'px-4 sm:px-6 py-4 sm:py-3 text-base'
  };

  // Variant styles
  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
    if (isDisabled) {
      return 'text-[var(--text-tertiary)] cursor-not-allowed opacity-50';
    }

    switch (variant) {
      case 'pills':
        return isActive
          ? 'bg-[var(--color-primary)] text-white'
          : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]';

      case 'underline':
        return isActive
          ? 'text-[var(--color-primary)] border-b-2 border-[var(--color-primary)]'
          : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] border-b-2 border-transparent';

      default:
        return isActive
          ? 'bg-[var(--color-primary)] text-white'
          : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]';
    }
  };

  const baseButtonClasses = `
    font-medium transition-colors
    ${fullWidth ? 'flex-1' : 'sm:flex-none'}
    ${variant === 'pills' ? 'rounded-md' : ''}
    ${sizeClasses[size]}
  `.trim();

  if (variant === 'underline') {
    return (
      <div className={`border-b border-[var(--border-primary)] ${className}`}>
        <nav className="flex">
          {items.map((item) => {
            const isActive = activeTab === item.id;
            const isDisabled = item.disabled || false;

            return (
              <button
                key={item.id}
                onClick={() => !isDisabled && onTabChange(item.id)}
                disabled={isDisabled}
                className={`
                  ${baseButtonClasses}
                  ${getVariantClasses(isActive, isDisabled)}
                `}
                type="button"
              >
                {item.label}
              </button>
            );
          })}
        </nav>
      </div>
    );
  }

  return (
    <Card className={`p-1 ${className}`}>
      <div className="flex space-x-1">
        {items.map((item) => {
          const isActive = activeTab === item.id;
          const isDisabled = item.disabled || false;

          return (
            <button
              key={item.id}
              onClick={() => !isDisabled && onTabChange(item.id)}
              disabled={isDisabled}
              className={`
                ${baseButtonClasses}
                ${getVariantClasses(isActive, isDisabled)}
              `}
              type="button"
            >
              {item.label}
            </button>
          );
        })}
      </div>
    </Card>
  );
};

export default Tabs;