"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { useTranslations } from "next-intl";
import Image from "next/image";

interface PagePreviewDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  subtitle?: string | null;
  content?: string | null;
  metaImage?: string | null;
}

export function PagePreviewDialog({
  open,
  onOpenChange,
  title,
  subtitle,
  content,
  metaImage,
}: PagePreviewDialogProps) {
  const t = useTranslations("dashboard.pages.preview");

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[85vh] max-w-[920px] overflow-y-auto rounded-2xl p-6">
        <DialogHeader>
          <DialogTitle className="text-sm font-bold text-muted-foreground">
            {t("title")}
          </DialogTitle>
          <DialogDescription className="sr-only">{title}</DialogDescription>
        </DialogHeader>
        <div className="mt-4 space-y-5">
          <h2 className="text-2xl font-bold text-foreground">{title}</h2>
          {subtitle && (
            <p className="text-sm text-muted-foreground">{subtitle}</p>
          )}
          {metaImage && (
            <Image
              src={metaImage}
              alt={title}
              width={960}
              height={420}
              className="h-auto w-full rounded-xl object-cover"
            />
          )}
          {content && (
            <div
              className="prose prose-sm max-w-none text-sm text-foreground"
              dangerouslySetInnerHTML={{ __html: content }}
            />
          )}
        </div>
        <div className="mt-6 flex justify-start">
          <DialogClose asChild>
            <Button
              type="button"
              className="h-11 rounded-xl bg-primary px-6 font-bold text-white hover:bg-primary/90"
            >
              {t("close")}
            </Button>
          </DialogClose>
        </div>
      </DialogContent>
    </Dialog>
  );
}