// /components/tabs/tabs.tsx
  
import React, { useState } from "react";

interface TabItem {
  label: string; // Label of the tab
  content: React.ReactNode; // Content to display when the tab is active
}

interface TabsProps {
  tabs: TabItem[]; // Array of tabs
  defaultActiveTab?: number; // Index of the default active tab
  onTabChange?: (activeTabIndex: number) => void; // Callback when tab changes
}

const Tabs: React.FC<TabsProps> = ({
  tabs,
  defaultActiveTab = 0,
  onTabChange,
}) => {
  const [activeTab, setActiveTab] = useState(defaultActiveTab);

  const handleTabClick = (index: number) => {
    setActiveTab(index);
    if (onTabChange) onTabChange(index);
  };

  return (
    <div className="w-[20rem]">
      {/* Tab Headers */}
      <div className="flex justify-between border-b border-zinc-500">
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => handleTabClick(index)}
            className={`px-4 py-2 text-md font-medium transition-all border-b-2 focus:outline-none ${
              activeTab === index
                ? "text-zinc-300 border-zinc-600"
                : "text-zinc-500 border-transparent hover:text-zinc-600 hover:border-zinc-600"
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      <div className="p-4">
        {tabs[activeTab]?.content || <p>No content available</p>}
      </div>
    </div>
  );
};

  export { Tabs }