import { useState } from "react";
import ComponentCard from "../../../components/common/ComponentCard";
import PageMeta from "../../../components/common/PageMeta";
import { Tabs, TabList, Tab, TabPanel } from "../../../components/ui/tabs";

export default function TabsPage() {
  const [activeTab, setActiveTab] = useState("tab1");

  return (
    <>
      <PageMeta
        title="React.js Tabs Dashboard | TailAdmin - React.js Admin Dashboard Template"
        description="This is React.js Tabs Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
      />
      <div className="space-y-5 sm:space-y-6">
        <ComponentCard title="Default Tabs">
          <Tabs defaultTab="tab1" onChange={setActiveTab}>
            <TabList>
              <Tab
                tabId="tab1"
                isActive={activeTab === "tab1"}
                onClick={() => setActiveTab("tab1")}
              >
                Tab 1
              </Tab>
              <Tab
                tabId="tab2"
                isActive={activeTab === "tab2"}
                onClick={() => setActiveTab("tab2")}
              >
                Tab 2
              </Tab>
              <Tab
                tabId="tab3"
                isActive={activeTab === "tab3"}
                onClick={() => setActiveTab("tab3")}
              >
                Tab 3
              </Tab>
            </TabList>
            <div className="mt-4">
              <TabPanel tabId="tab1" isActive={activeTab === "tab1"}>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Content for Tab 1
                </p>
              </TabPanel>
              <TabPanel tabId="tab2" isActive={activeTab === "tab2"}>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Content for Tab 2
                </p>
              </TabPanel>
              <TabPanel tabId="tab3" isActive={activeTab === "tab3"}>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  Content for Tab 3
                </p>
              </TabPanel>
            </div>
          </Tabs>
        </ComponentCard>
      </div>
    </>
  );
}

