import { Button, Input, Label } from 'index'

import * as TabsPrimitive from './index'

export default () => (
  <TabsPrimitive.Root defaultValue="account" tw="w-[400px]">
    <TabsPrimitive.List>
      <TabsPrimitive.Trigger value="account">Account</TabsPrimitive.Trigger>
      <TabsPrimitive.Trigger value="password">Password</TabsPrimitive.Trigger>
    </TabsPrimitive.List>
    <TabsPrimitive.Content value="account">
      <p tw="text-sm text-slate-500 dark:text-slate-400">
        Make changes to your account here. Click save when you're done.
      </p>
      <div tw="grid gap-2 py-4">
        <div tw="space-y-1">
          <Label htmlFor="name">Name</Label>
          <Input id="name" defaultValue="Pedro Duarte" />
        </div>
        <div tw="space-y-1">
          <Label htmlFor="username">Username</Label>
          <Input id="username" defaultValue="@peduarte" />
        </div>
      </div>
      <div tw="flex">
        <Button>Save changes</Button>
      </div>
    </TabsPrimitive.Content>
    <TabsPrimitive.Content value="password">
      <p tw="text-sm text-slate-500 dark:text-slate-400">
        Change your password here. After saving, you'll be logged out.
      </p>
      <div tw="grid gap-2 py-4">
        <div tw="space-y-1">
          <Label htmlFor="current">Current password</Label>
          <Input id="current" type="password" />
        </div>
        <div tw="space-y-1">
          <Label htmlFor="new">New password</Label>
          <Input id="new" type="password" />
        </div>
      </div>
      <div tw="flex">
        <Button>Save password</Button>
      </div>
    </TabsPrimitive.Content>
  </TabsPrimitive.Root>
)
