"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Skeleton } from "@/components/ui/skeleton";

export function CommissionSlipDialog({ src }: { src: string }) {
  const [imageState, setImageState] = useState<"loading" | "loaded" | "error">("loading");

  return <Dialog>
    <DialogTrigger render={<Button type="button" variant="outline" size="sm" className="w-fit" />}>
      ดูสลิป
    </DialogTrigger>
    <DialogContent className="max-h-[90svh] max-w-[calc(100%-2rem)] sm:max-w-3xl">
      <DialogTitle>สลิปการชำระเงิน</DialogTitle>
      {imageState === "loading" && <Skeleton className="h-80 w-full" aria-label="กำลังโหลดสลิป" />}
      {imageState === "error" && <p className="text-sm text-destructive">โหลดสลิปไม่สำเร็จ</p>}
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={src} alt="สลิปการชำระเงิน"
        onLoad={() => setImageState("loaded")} onError={() => setImageState("error")}
        className={imageState === "loaded" ? "max-h-[calc(90svh-7rem)] w-full object-contain" : "hidden"} />
    </DialogContent>
  </Dialog>;
}