import { Settings2 } from 'lucide-react'

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

export default () => (
  <PopoverPrimitive.Root>
    <PopoverPrimitive.Trigger asChild>
      <Button variant="outline" tw="w-10 rounded p-0">
        <Settings2 tw="h-[40px] w-[40pxs]" />
        <span tw="sr-only">Open popover</span>
      </Button>
    </PopoverPrimitive.Trigger>
    <PopoverPrimitive.Content tw="w-80">
      <div tw="grid gap-4">
        <div tw="space-y-2">
          <h4 tw="font-medium leading-none">Dimensions</h4>
          <p tw="text-sm text-slate-500 dark:text-slate-400">
            Set the dimensions for the layer.
          </p>
        </div>
        <div tw="grid gap-2">
          <div tw="grid grid-cols-3 items-center gap-4">
            <Label htmlFor="width">Width</Label>
            <Input id="width" defaultValue="100%" tw="col-span-2 h-8" />
          </div>
          <div tw="grid grid-cols-3 items-center gap-4">
            <Label htmlFor="maxWidth">Max. width</Label>
            <Input id="maxWidth" defaultValue="300px" tw="col-span-2 h-8" />
          </div>
          <div tw="grid grid-cols-3 items-center gap-4">
            <Label htmlFor="height">Height</Label>
            <Input id="height" defaultValue="25px" tw="col-span-2 h-8" />
          </div>
          <div tw="grid grid-cols-3 items-center gap-4">
            <Label htmlFor="maxHeight">Max. height</Label>
            <Input id="maxHeight" defaultValue="none" tw="col-span-2 h-8" />
          </div>
        </div>
      </div>
    </PopoverPrimitive.Content>
  </PopoverPrimitive.Root>
)
