import { ReactNode, useState } from "react";

interface TabsProps {
  children: ReactNode;
  defaultTab?: string;
  className?: string;
  onChange?: (tabId: string) => void;
}

export const Tabs: React.FC<TabsProps> = ({
  children,
  defaultTab,
  className = "",
  onChange,
}) => {
  const [activeTab, setActiveTab] = useState(defaultTab || "");

  const handleTabChange = (tabId: string) => {
    setActiveTab(tabId);
    if (onChange) {
      onChange(tabId);
    }
  };

  return (
    <div className={className}>
      {typeof children === "function"
        ? children(activeTab, handleTabChange)
        : children}
    </div>
  );
};

interface TabListProps {
  children: ReactNode;
  className?: string;
}

export const TabList: React.FC<TabListProps> = ({
  children,
  className = "",
}) => {
  return (
    <div
      className={`flex items-center gap-0.5 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900 ${className}`}
    >
      {children}
    </div>
  );
};

interface TabProps {
  children: ReactNode;
  tabId: string;
  isActive?: boolean;
  onClick?: () => void;
  className?: string;
}

export const Tab: React.FC<TabProps> = ({
  children,
  tabId,
  isActive = false,
  onClick,
  className = "",
}) => {
  return (
    <button
      onClick={onClick}
      className={`px-3 py-2 font-medium w-full rounded-md text-theme-sm hover:text-gray-900 dark:hover:text-white ${
        isActive
          ? "shadow-theme-xs text-gray-900 dark:text-white bg-white dark:bg-gray-800"
          : "text-gray-500 dark:text-gray-400"
      } ${className}`}
      type="button"
    >
      {children}
    </button>
  );
};

interface TabPanelProps {
  children: ReactNode;
  tabId: string;
  isActive?: boolean;
  className?: string;
}

export const TabPanel: React.FC<TabPanelProps> = ({
  children,
  tabId,
  isActive = false,
  className = "",
}) => {
  if (!isActive) return null;

  return <div className={className}>{children}</div>;
};

