import { ReactNode, useState } from 'react';
import clsx from 'clsx';

export type TabItem = {
  label: string;
  icon?: ReactNode;
  content: ReactNode;
  disabled?: boolean;
};

type Props = {
  items: TabItem[];
  defaultIndex?: number;
  variant?: 'line' | 'center';
  onChange?: (index: number) => void;
};

const Tabs = ({
  items,
  defaultIndex = 0,
  variant = 'line',
  onChange,
}: Props) => {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);

  const handleClick = (index: number, disabled?: boolean) => {
    if (disabled) return;
    setActiveIndex(index);
    onChange?.(index);
  };

  return (
    <div className="w-full">
      {/* TAB LIST */}
      <div
        className={clsx(
          'flex flex-wrap border-b',
          variant === 'center' && 'justify-center'
        )}
      >
        {items.map((tab, index) => {
          const isActive = index === activeIndex;

          return (
            <button
              key={index}
              onClick={() => handleClick(index, tab.disabled)}
              className={clsx(
                'relative px-5 py-3 flex items-center transition-all duration-300',
                tab.disabled && 'opacity-50 cursor-not-allowed',

                // LINE STYLE
                variant === 'line' &&
                  'before:absolute before:bottom-0 before:left-0 before:right-0 before:h-[2px] before:w-0 before:bg-amber-500 before:transition-all before:duration-300 hover:before:w-full',

                // CENTER STYLE
                variant === 'center' &&
                  'border border-transparent p-3.5 py-2 hover:border-slate-300',

                // ACTIVE STATE
                isActive &&
                  (variant === 'line'
                    ? 'text-amber-600 before:!w-full'
                    : 'border-slate-300 text-amber-600')
              )}
            >
              {tab.icon && <span className="mr-2">{tab.icon}</span>}
              {tab.label}
            </button>
          );
        })}
      </div>
      <div className="pt-5">
        {items[activeIndex]?.content}
      </div>
    </div>
  );
};

export default Tabs;