Popover

'use client';
import React from 'react';
import {
	Popover,
	PopoverBody,
	PopoverContent,
	PopoverDescription,
	PopoverHeader,
	PopoverTitle,
	PopoverTrigger,
    PopoverClose,
	PopoverFooter,
} from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { Trash2 } from 'lucide-react';

export default function ConfirmationDemo() {
	return (
		<Popover>
			<PopoverTrigger asChild>
				<Button variant="destructive" size="sm">
					<Trash2 className="mr-2 h-4 w-4" />
					Delete Item
				</Button>
			</PopoverTrigger>
			<PopoverContent className="w-80">
				<PopoverHeader>
					<PopoverTitle className="text-destructive">
						Delete Confirmation
					</PopoverTitle>
					<PopoverDescription>This action cannot be undone</PopoverDescription>
				</PopoverHeader>
				<PopoverBody>
					<div className="space-y-3">
						<p className="text-sm text-muted-foreground">
							Are you sure you want to delete <strong>{'Project Alpha'}</strong>
							? This will permanently remove all associated data.
						</p>
						<div className="rounded-md bg-destructive/10 p-3">
							<p className="text-xs text-destructive">
								<strong>Warning:</strong> This action is irreversible and will
								affect 3 team members.
							</p>
						</div>
					</div>
				</PopoverBody>
				<PopoverFooter className="grid-cols-2">
					<PopoverClose asChild>
						<Button variant="outline" size="sm">
							Cancel
						</Button>
					</PopoverClose>
					<Button variant="destructive" size="sm">
						Delete
					</Button>
				</PopoverFooter>
			</PopoverContent>
		</Popover>
	);
}