Popover

import { Button } from "@moodinary/ui/components/button";
import { PencilIcon, Trash2Icon } from "@moodinary/ui/components/icons";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@moodinary/ui/components/popover";
import { domMax, LazyMotion } from "@moodinary/ui/lib/motion";

export default function CalendarEvent() {
	return (
		<LazyMotion features={domMax} strict>
			<Popover>
				<PopoverTrigger render={<Button variant="secondary" />}>
					Reunión de equipo
				</PopoverTrigger>
				<PopoverContent align="start">
					<div>
						<p className="font-medium text-sm">Reunión de equipo</p>
						<p className="mt-0.5 text-muted-foreground text-xs">
							6 oct, 10:00 a 11:00
						</p>
					</div>
					<div className="flex flex-wrap gap-1.5">
						<Button size="sm" variant="secondary">
							Desactivar
						</Button>
						<Button size="sm" variant="ghost">
							<PencilIcon aria-hidden className="size-3.5" />
							Editar
						</Button>
						<Button size="sm" variant="ghost">
							<Trash2Icon aria-hidden className="size-3.5" />
							Eliminar
						</Button>
					</div>
				</PopoverContent>
			</Popover>
		</LazyMotion>
	);
}