import { Button, Input, Label } from 'index'
import * as DialogPrimitive from './dialog'

export function DialogDemo() {
  return (
    <DialogPrimitive.Root>
      <DialogPrimitive.Trigger asChild>
        <Button variant="outline">Edit Profile</Button>
      </DialogPrimitive.Trigger>
      <DialogPrimitive.Content tw="sm:max-w-[425px]">
        <DialogPrimitive.Header>
          <DialogPrimitive.Title>Edit profile</DialogPrimitive.Title>
          <DialogPrimitive.Description>
            Make changes to your profile here. Click save when you're done.
          </DialogPrimitive.Description>
        </DialogPrimitive.Header>
        <div tw="grid gap-4 py-4">
          <div tw="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" tw="text-right">
              Name
            </Label>
            <Input id="name" defaultValue="Pedro Duarte" tw="col-span-3" />
          </div>
          <div tw="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" tw="text-right">
              Username
            </Label>
            <Input id="username" defaultValue="@peduarte" tw="col-span-3" />
          </div>
        </div>
        <DialogPrimitive.Footer>
          <Button type="submit">Save changes</Button>
        </DialogPrimitive.Footer>
      </DialogPrimitive.Content>
    </DialogPrimitive.Root>
  )
}
