import { useState } from "react";
import { Tabs } from "gwan-design-system";

const items = [
  {
    key: "profile",
    label: "Profile",
    content: <p className="text-sm text-muted-fg py-4">Name, photo and bio.</p>,
  },
  {
    key: "security",
    label: "Security",
    content: <p className="text-sm text-muted-fg py-4">
      Password and two-factor settings.
    </p>,
  },
  {
    key: "billing",
    label: "Billing",
    content: <p className="text-sm text-muted-fg py-4">
      Plan, invoices and payment method.
    </p>,
  },
  {
    key: "api",
    label: "API",
    content: <p className="text-sm text-muted-fg py-4">
      Keys are available on paid plans.
    </p>,
    disabled: true,
  },
];

const Example = () => {
  const [activeKey, setActiveKey] = useState("profile");

  return (
    <Tabs
      items={items}
      activeKey={activeKey}
      onChange={setActiveKey}
    />
  );
};