import {
  Accordion, Alert, AlertDialog, AspectRatio, Avatar, Badge, Breadcrumb, Button,
  Calendar, Card, Carousel, ChartContainer, Checkbox, Collapsible, Command,
  ContextMenu, Dialog, Divider, Drawer, DropdownMenu, Form, HoverCard, Input,
  InputOTP, Label, Menubar, Modal, NavigationMenu, Pagination, Popover, Progress,
  RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea,
  Separator, Sheet, Sidebar, Skeleton, Slider, SonnerToaster, Spinner, Switch,
  Table, Tabs, Textarea, Toast, Toaster, Toggle, ToggleGroup, Tooltip,
} from "@cookest/ui";
import "@cookest/ui/styles.css";

// Variants
<Button variant="primary">Save changes</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Learn more</Button>
<Button variant="danger">Delete account</Button>

// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// Loading state
<Button loading>Saving…</Button>

// Icon slots
<Button iconLeft={<PlusIcon />}>Add item</Button>
<Button iconRight={<ArrowRightIcon />}>Continue</Button>

// Basic
<Input label="Email" type="email" placeholder="you@example.com" />

// With helper text
<Input label="Username" helperText="3–20 characters, lowercase only" />

// Error state
<Input label="Password" type="password" error="Minimum 8 characters required" />

// Icon slots
<Input label="Search" iconLeft={<SearchIcon />} placeholder="Search recipes…" />

// Full-width
<Input label="Name" fullWidth />

// Simple card with padding
<Card>
  <p>Card content</p>
</Card>

// Structured card
<Card padding="none">
  <CardHeader>Recipe Details</CardHeader>
  <CardBody>
    <p>Ingredients and steps…</p>
  </CardBody>
  <CardFooter>
    <Button>Start cooking</Button>
  </CardFooter>
</Card>

// Interactive card (hover lift)
<Card variant="interactive" onClick={handleClick}>
  <p>Click me</p>
</Card>

<Badge variant="success">Active</Badge>
<Badge variant="warning" dot>Expiring soon</Badge>
<Badge variant="error" size="sm">Out of stock</Badge>
<Badge removable onRemove={() => removeTag(id)}>Vegan</Badge>

// With image
<Avatar src="/users/alice.jpg" alt="Alice Smith" size="lg" />

// Initials fallback
<Avatar alt="Bob Jones" size="md" />

// Group
<AvatarGroup max={3}>
  <Avatar alt="Alice Smith" />
  <Avatar alt="Bob Jones" />
  <Avatar alt="Carol White" />
  <Avatar alt="Dave Green" />
</AvatarGroup>

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open modal</Button>

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Confirm deletion"
  footer={
    <>
      <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
      <Button variant="danger" onClick={handleDelete}>Delete</Button>
    </>
  }
>
  <p>This action cannot be undone.</p>
</Modal>

<Tooltip content="Save your changes" position="top">
  <Button variant="ghost" size="sm">
    <SaveIcon />
  </Button>
</Tooltip>

const [enabled, setEnabled] = useState(false);

<Toggle
  checked={enabled}
  onChange={setEnabled}
  label="Enable notifications"
/>

const [diet, setDiet] = useState("");

<Select
  label="Dietary preference"
  options={[
    { value: "none", label: "No preference" },
    { value: "vegan", label: "Vegan" },
    { value: "vegetarian", label: "Vegetarian" },
    { value: "gluten-free", label: "Gluten-free" },
  ]}
  value={diet}
  onChange={setDiet}
  searchable
/>

<SkeletonCard />

// Text lines
<Skeleton variant="text" lines={3} />

// Avatar placeholder
<Skeleton variant="circular" width={40} height={40} />

// Image placeholder
<Skeleton variant="rectangular" width="100%" height={200} />

// Full card
<SkeletonCard />

// Static info banner
<Alert variant="info" title="Did you know?">
  You can save up to 20% by switching to the Pro plan.
</Alert>

// Dismissible error
const [show, setShow] = useState(true);
<Alert
  variant="error"
  title="Upload failed"
  dismissible
  visible={show}
  onDismiss={() => setShow(false)}
>
  The file exceeds the 10 MB limit.
</Alert>

// Horizontal
<Divider />

// With label
<Divider label="or continue with" />

// Vertical (needs a fixed height context)
<div className="flex h-8 items-center gap-4">
  <span>Option A</span>
  <Divider orientation="vertical" />
  <span>Option B</span>
</div>

import { Accordion } from "@cookest/ui";

<Accordion
  items={[
    {
      id: "pantry",
      title: "Pantry sync",
      subtitle: "2 items expiring soon",
      content: <p>Your pantry data syncs automatically.</p>,
    },
  ]}
  defaultOpen="pantry"
/>

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@cookest/ui";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="danger">Delete recipe</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this recipe?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

import { AspectRatio } from "@cookest/ui";

<AspectRatio ratio={16 / 9}>
  <img src="/recipe.jpg" alt="Recipe" className="h-full w-full rounded-lg object-cover" />
</AspectRatio>

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@cookest/ui";

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

import { Calendar } from "@cookest/ui";

const [selected, setSelected] = useState<Date | undefined>(new Date());

<Calendar mode="single" selected={selected} onSelect={setSelected} />

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@cookest/ui";

<Carousel className="w-full max-w-md">
  <CarouselContent>
    {[1, 2, 3].map((item) => (
      <CarouselItem key={item}>
        <Card>
          <p>Slide {item}</p>
        </Card>
      </CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@cookest/ui";

import { Bar, BarChart, XAxis } from "recharts";

const chartConfig = {
  protein: { label: "Protein", color: "#7A9A65" },
};

<ChartContainer config={chartConfig} className="h-64">
  <BarChart data={[{ day: "Mon", protein: 24 }]}>
    <XAxis dataKey="day" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="protein" fill="var(--color-protein)" />
  </BarChart>
</ChartContainer>

import { Checkbox } from "@cookest/ui";

<Checkbox checked={checked} onCheckedChange={setChecked} aria-label="Select ingredient" />

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@cookest/ui";

<Collapsible>
  <CollapsibleTrigger asChild>
    <Button variant="ghost">Show nutrition notes</Button>
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p>Extra nutritional guidance goes here.</p>
  </CollapsibleContent>
</Collapsible>

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandShortcut,
} from "@cookest/ui";

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search actions..." />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Recipes">
      <CommandItem>
        Generate recipe
        <CommandShortcut>⌘K</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuTrigger,
} from "@cookest/ui";

<ContextMenu>
  <ContextMenuTrigger asChild>
    <Card>
      <p>Right-click this card</p>
    </Card>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Rename</ContextMenuItem>
    <ContextMenuItem>Duplicate</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@cookest/ui";

<Dialog>
  <DialogTrigger asChild>
    <Button>Open dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Share recipe</DialogTitle>
      <DialogDescription>Copy a link or invite collaborators.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button>Done</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@cookest/ui";

<Drawer>
  <DrawerTrigger asChild>
    <Button>Open drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Quick actions</DrawerTitle>
      <DrawerDescription>Choose the next step.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Continue</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@cookest/ui";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost">Open menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@cookest/ui";

const form = useForm({ defaultValues: { email: "" } });

<Form {...form}>
  <form onSubmit={form.handleSubmit(console.log)}>
    <FormField
      control={form.control}
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input type="email" {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  </form>
</Form>

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@cookest/ui";

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="ghost">Hover for preview</Button>
  </HoverCardTrigger>
  <HoverCardContent>
    <p>Quick recipe summary.</p>
  </HoverCardContent>
</HoverCard>

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@cookest/ui";

<InputOTP maxLength={6} value={code} onChange={setCode}>
  <InputOTPGroup>
    <InputOTPSlot index={0} />
    <InputOTPSlot index={1} />
    <InputOTPSlot index={2} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot index={3} />
    <InputOTPSlot index={4} />
    <InputOTPSlot index={5} />
  </InputOTPGroup>
</InputOTP>

import { Label } from "@cookest/ui";

<Label htmlFor="servings">Servings</Label>

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@cookest/ui";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New recipe</MenubarItem>
      <MenubarItem>Export</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@cookest/ui";

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Docs</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs/backend">Backend</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@cookest/ui";

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="?page=1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=2" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

import { Popover, PopoverContent, PopoverTrigger } from "@cookest/ui";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="ghost">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Popover content</p>
  </PopoverContent>
</Popover>

import { Progress } from "@cookest/ui";

<Progress value={72} label="Meal plan completion" showValue color="success" />

import { RadioGroup, RadioGroupItem } from "@cookest/ui";

<RadioGroup value={planType} onValueChange={setPlanType}>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="balanced" id="balanced" />
    <Label htmlFor="balanced">Balanced</Label>
  </div>
</RadioGroup>

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@cookest/ui";

<ResizablePanelGroup className="min-h-[320px] rounded-lg border">
  <ResizablePanel defaultSize={35}>Filters</ResizablePanel>
  <ResizableHandle withHandle />
  <ResizablePanel defaultSize={65}>Results</ResizablePanel>
</ResizablePanelGroup>

import { ScrollArea, ScrollBar } from "@cookest/ui";

<ScrollArea className="h-48 rounded-md border p-4">
  <div className="space-y-2">...</div>
  <ScrollBar orientation="vertical" />
</ScrollArea>

import { Separator } from "@cookest/ui";

<div className="flex h-8 items-center gap-4">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@cookest/ui";

<Sheet>
  <SheetTrigger asChild>
    <Button>Open sheet</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Recipe filters</SheetTitle>
      <SheetDescription>Adjust cuisine and time limits.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@cookest/ui";

<SidebarProvider>
  <Sidebar>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Cookest</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>Recipes</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
  </SidebarInset>
</SidebarProvider>

import { Slider } from "@cookest/ui";

<Slider
  min={0}
  max={60}
  value={minutes}
  onChange={setMinutes}
  showValue
  marks={[{ value: 15 }, { value: 30 }, { value: 45 }]}
/>

import { SonnerToaster } from "@cookest/ui";

<>
  <SonnerToaster richColors closeButton />
</>

import { Spinner } from "@cookest/ui";

<Spinner size="lg" label="Loading recipes" />

import { Switch } from "@cookest/ui";

<Switch checked={usePantry} onCheckedChange={setUsePantry} aria-label="Use pantry" />

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@cookest/ui";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Ingredient</TableHead>
      <TableHead>Qty</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Eggs</TableCell>
      <TableCell>4</TableCell>
    </TableRow>
  </TableBody>
</Table>

import { Tabs } from "@cookest/ui";

<Tabs
  items={[
    { id: "ingredients", label: "Ingredients", content: <p>List</p> },
    { id: "steps", label: "Steps", content: <p>Steps</p> },
  ]}
/>

import { Textarea } from "@cookest/ui";

<Textarea
  label="Notes"
  helperText="Add substitutions or serving tips"
  showCount
  maxLength={280}
  autoResize
/>

import {
  Toast,
  ToastAction,
  ToastDescription,
  ToastTitle,
  Toaster,
  toast,
  useToast,
} from "@cookest/ui";

<>
  <Button
    onClick={() =>
      toast({
        title: "Saved",
        description: "Recipe updated successfully.",
      })
    }
  >
    Show toast
  </Button>
  <Toaster />
</>

import { ToggleGroup, ToggleGroupItem } from "@cookest/ui";

<ToggleGroup type="single" value={view} onValueChange={setView}>
  <ToggleGroupItem value="list">List</ToggleGroupItem>
  <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
</ToggleGroup>