<template>
  <div class="space-x-2">
    <!-- Primary Button -->
    <Button>Primary</Button>

    <!-- Secondary Button -->
    <Button variant="secondary">Secondary</Button>

    <!-- Outline Button -->
    <Button variant="outline">Outline</Button>

    <!-- Ghost Button -->
    <Button variant="ghost">Ghost</Button>

    <!-- Destructive Button -->
    <Button variant="destructive">Delete</Button>

    <!-- Loading Button -->
    <Button :disabled="loading">
      <Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
      {{ loading ? 'Saving...' : 'Save' }}
    </Button>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Loader2 } from 'lucide-vue-next'

const loading = ref(false)
</script>

<template>
  <form @submit="onSubmit" class="space-y-6 max-w-md">
    <!-- Input Field -->
    <FormItem>
      <FormLabel for="email">Email</FormLabel>
      <FormControl>
        <Input
          id="email"
          v-model="formData.email"
          type="email"
          placeholder="Enter your email"
        />
      </FormControl>
      <FormDescription>
        We'll never share your email with anyone else.
      </FormDescription>
      <FormMessage />
    </FormItem>

    <!-- Select Field -->
    <FormItem>
      <FormLabel>Country</FormLabel>
      <Select v-model="formData.country">
        <FormControl>
          <SelectTrigger>
            <SelectValue placeholder="Select a country" />
          </SelectTrigger>
        </FormControl>
        <SelectContent>
          <SelectItem value="us">United States</SelectItem>
          <SelectItem value="ca">Canada</SelectItem>
          <SelectItem value="uk">United Kingdom</SelectItem>
        </SelectContent>
      </Select>
      <FormMessage />
    </FormItem>

    <!-- Checkbox -->
    <FormItem class="flex flex-row items-start space-x-3 space-y-0">
      <FormControl>
        <Checkbox v-model:checked="formData.newsletter" />
      </FormControl>
      <div class="space-y-1 leading-none">
        <FormLabel>Subscribe to newsletter</FormLabel>
        <FormDescription>
          Receive updates about new features and releases.
        </FormDescription>
      </div>
    </FormItem>

    <Button type="submit" class="w-full">
      Create Account
    </Button>
  </form>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Checkbox } from '@/components/ui/checkbox'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  FormControl,
  FormDescription,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'

const formData = reactive({
  email: '',
  country: '',
  newsletter: false
})

const onSubmit = (event: Event) => {
  event.preventDefault()
  console.log('Form submitted:', formData)
}
</script>

<template>
  <div class="space-x-2">
    <!-- Dialog Example -->
    <Dialog>
      <DialogTrigger as-child>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent class="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Share link</DialogTitle>
          <DialogDescription>
            Anyone who has this link will be able to view this.
          </DialogDescription>
        </DialogHeader>
        <div class="flex items-center space-x-2">
          <div class="grid flex-1 gap-2">
            <Label for="link" class="sr-only">Link</Label>
            <Input id="link" :default-value="shareLink" readonly />
          </div>
          <Button type="submit" size="sm" class="px-3">
            <Copy class="h-4 w-4" />
          </Button>
        </div>
        <DialogFooter class="sm:justify-start">
          <DialogClose as-child>
            <Button type="button" variant="secondary">
              Close
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>

    <!-- Sheet Example -->
    <Sheet>
      <SheetTrigger as-child>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div class="grid gap-4 py-4">
          <div class="grid grid-cols-4 items-center gap-4">
            <Label for="name" class="text-right">Name</Label>
            <Input id="name" value="Pedro Duarte" class="col-span-3" />
          </div>
          <div class="grid grid-cols-4 items-center gap-4">
            <Label for="username" class="text-right">Username</Label>
            <Input id="username" value="@peduarte" class="col-span-3" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose as-child>
            <Button type="submit">Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet'
import { Copy } from 'lucide-vue-next'

const shareLink = 'https://ui.shadcn.com/docs/installation'
</script>

<template>
  <div class="theme-provider">
    <!-- Components automatically adapt to theme -->
    <Card>
      <CardHeader>
        <CardTitle>Theme-Aware Component</CardTitle>
        <CardDescription>
          This card automatically adapts to light/dark mode
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Button>Primary Button</Button>
        <Button variant="secondary">Secondary Button</Button>
      </CardContent>
    </Card>
  </div>
</template>

<style>
/* Theme detection happens automatically via CSS media queries */
@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode CSS variables applied automatically */
  }
}
</style>

<template>
  <div>
    <!-- Theme Toggle Button -->
    <Button @click="toggleTheme" variant="outline" size="icon">
      <Sun v-if="isDark" class="h-[1.2rem] w-[1.2rem]" />
      <Moon v-else class="h-[1.2rem] w-[1.2rem]" />
      <span class="sr-only">Toggle theme</span>
    </Button>

    <!-- Theme-aware content -->
    <div class="mt-4 space-y-4">
      <Alert>
        <AlertTriangle class="h-4 w-4" />
        <AlertTitle>Theme Status</AlertTitle>
        <AlertDescription>
          Current theme: {{ isDark ? 'Dark' : 'Light' }} mode
        </AlertDescription>
      </Alert>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Sun, Moon, AlertTriangle } from 'lucide-vue-next'

const isDark = useDark()
const toggleTheme = useToggle(isDark)
</script>