"use client"

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/src/components/ui/dialog"
import type { MenuCategory } from "@/src/state/menu"
import { formatDate } from "../utils"

type Props = {
  open: boolean
  onOpenChange: (open: boolean) => void
  category: MenuCategory | null
}

export function CategoryPreviewDialog({ open, onOpenChange, category }: Props) {
  if (!category) return null

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-[534px]">
        <DialogHeader>
          <DialogTitle>Aperçu de la catégorie</DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {category.thumbnailUrl && (
            <div className="aspect-video w-full overflow-hidden rounded-lg border">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={category.thumbnailUrl}
                alt={category.name}
                className="h-full w-full object-cover"
              />
            </div>
          )}

          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Nom</span>
              <span className="font-medium">{category.name}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Créée le</span>
              <span className="font-medium">{formatDate(category.createdAt)}</span>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}