import { Tabs } from "@/registry/magic-genie-tabs/magic-genie-tabs";

export function MagicGenieTabsDemo() {
  const tabs = [
    {
      title: "Overview",
      value: "overview",
      content: (
        <div>
          <h2 className="text-xl font-semibold mb-3">Overview</h2>
          <p>
            This is the overview section. Add any content here — text, cards,
            charts, anything. The panel scrolls if you add more content.
          </p>
        </div>
      ),
    },
    {
      title: "Analytics",
      value: "analytics",
      content: (
        <div>
          <h2 className="text-xl font-semibold mb-3">Analytics</h2>
          <p>Imagine charts here 📈 This tab opens with the same genie effect.</p>
        </div>
      ),
    },
    {
      title: "Settings",
      value: "settings",
      content: (
        <div>
          <h2 className="text-xl font-semibold mb-3">Settings</h2>
          <p>Update preferences, security, and profile details here.</p>
        </div>
      ),
    },
  ];

  return <Tabs tabs={tabs} />;
}