'use client';

import { Service } from '@/types';

import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import Image from 'next/image';

const ServiceDetail = ({
	service,
	isOpen = false,
	handleClose,
}: {
	service: Service;
	isOpen: boolean;
	handleClose: () => void;
}) => {
	return (
		<CustomResponsiveDialog
			open={isOpen}
			setOpen={handleClose}
			header={
				<div className="w-full">
					<h2 className="text-lg font-semibold text-foreground/90">
						This is your service detail
					</h2>
					<p className="mt-1 text-sm text-foreground/60">
						Here you can see all the details of your service.
					</p>
				</div>
			}
			// control padding for dialog content (desktop)
			classNameContent="m-0 p-0 max-w-[640px] p-4 rounded-lg bg-background border-none max-h-[90vh] overflow-y-scroll overflow-x-scroll scrollbar-x-hidden"
			// control body padding for both dialog & drawer
			classNameBody="px-2 py-6 sm:px-12 sm:py-6"
			// style the close button (absolute top-right)
			classNameCloseBtn="absolute top-4 right-4 text-[#CD3232] cursor-pointer"
		>
			<div className="space-y-6">
				{/* Image Section with Next.js Image */}
				{service.image && (
					<div className="relative w-full h-64 overflow-hidden rounded-lg">
						<Image
							src={service.image}
							alt={service.title}
							fill
							className="object-cover"
							sizes="(max-width: 640px) 100vw, 640px"
							priority
						/>
					</div>
				)}

				{/* Title Section */}
				<div>
					<h3 className="text-2xl font-serif tracking-wide text-foreground">
						{service.title}
					</h3>
					<div className="luxury-line my-3" />
				</div>

				{/* Slug Section */}
				{service.slug && (
					<div className="flex items-center gap-2">
						<span className="text-xs font-medium text-accent-foreground bg-accent px-2 py-1 rounded-md">
							Slug:
						</span>
						<span className="text-sm text-muted-foreground font-mono">
							{service.slug}
						</span>
					</div>
				)}

				{/* Detail/Description Section */}
				<div>
					<p className="text-sm text-muted-foreground leading-relaxed">
						{service.description}
					</p>
				</div>
			</div>
		</CustomResponsiveDialog>
	);
};
export default ServiceDetail;