import React from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { TabGroupList, TabGroupTrigger, TabGroup } from "../ui/tabGroup";

const meta: Meta = {
  title: "Components/TabGroup",
  component: TabGroup,
};

export default meta;
type Story = StoryObj<typeof TabGroup>;

export const Default: Story = {
  render: () => (
    <TabGroup defaultValue="account" className="w-[400px]">
      <TabGroupList className="grid w-full grid-cols-2">
        <TabGroupTrigger value="account">Account</TabGroupTrigger>
        <TabGroupTrigger value="password">Password</TabGroupTrigger>
      </TabGroupList>
      {/* <TabGroupContent value="account">
        <Card>
          <CardHeader>
            <CardTitle>Account</CardTitle>
            <CardDescription>
              Make changes to your account here. Click save when you're done.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="name">Name</Label>
              <Input id="name" defaultValue="Pedro Duarte" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="username">Username</Label>
              <Input id="username" defaultValue="@peduarte" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save changes</Button>
          </CardFooter>
        </Card>
      </TabGroupContent>
      <TabGroupContent value="password">
        <Card>
          <CardHeader>
            <CardTitle>Password</CardTitle>
            <CardDescription>
              Change your password here. After saving, you'll be logged out.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2">
            <div className="space-y-1">
              <Label htmlFor="current">Current password</Label>
              <Input id="current" type="password" />
            </div>
            <div className="space-y-1">
              <Label htmlFor="new">New password</Label>
              <Input id="new" type="password" />
            </div>
          </CardContent>
          <CardFooter>
            <Button>Save password</Button>
          </CardFooter>
        </Card>
      </TabGroupContent> */}
    </TabGroup>
  ),
};