"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

export function CascadedComponentDemo() {
  const [dialogOpen, setDialogOpen] = useState(false)

  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Foreground Color in Cascaded Components</CardTitle>
      </CardHeader>
      <CardContent className="flex flex-wrap gap-4">
        {/* Dropdown Example */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline">Dropdown Menu</Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56">
            <DropdownMenuLabel>Dropdown with Foreground Color</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Profile</DropdownMenuItem>
            <DropdownMenuItem>Settings</DropdownMenuItem>
            <DropdownMenuItem>Logout</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>

        {/* Dialog Example */}
        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
          <DialogTrigger asChild>
            <Button variant="outline">Open Dialog</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Dialog with Foreground Color</DialogTitle>
              <DialogDescription>This dialog uses the foreground color as its background.</DialogDescription>
            </DialogHeader>
            <div className="flex justify-end">
              <Button onClick={() => setDialogOpen(false)}>Close</Button>
            </div>
          </DialogContent>
        </Dialog>

        {/* Tooltip Example */}
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="outline">Hover Me</Button>
            </TooltipTrigger>
            <TooltipContent>
              <p>Tooltip with Foreground Color</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>

        {/* Popover Example */}
        <Popover>
          <PopoverTrigger asChild>
            <Button variant="outline">Popover</Button>
          </PopoverTrigger>
          <PopoverContent className="w-80">
            <div className="grid gap-4">
              <div className="space-y-2">
                <h4 className="font-medium leading-none">Popover with Foreground Color</h4>
                <p className="text-sm text-muted-foreground">
                  This popover uses the foreground color as its background.
                </p>
              </div>
            </div>
          </PopoverContent>
        </Popover>
      </CardContent>
    </Card>
  )
}