"use client";

import {
	Dialog,
	DialogContent,
	DialogTitle,
	DialogTrigger,
} from "@radix-ui/react-dialog";
import Image, { ImageProps } from "next/image";
import React, { useState } from "react";

const PhotoViewer: React.FC<ImageProps> = ({ ...props }) => {
	const [selected, setSelected] = useState(false);
	return (
		<Dialog open={selected} onOpenChange={setSelected}>
			<DialogTitle>{props.alt}</DialogTitle>
			<DialogTrigger asChild>
				<Image onClick={() => setSelected(true)} {...props} />
			</DialogTrigger>
			<DialogContent>
				<Image {...props} unoptimized />
			</DialogContent>
		</Dialog>
	);
};

export default PhotoViewer;