import React from "react";
import { Download } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import type { ResourceModalProps } from "./types";

export function ResourceModal({
  open,
  onClose,
  title,
  videoUrl,
  tags,
  attachments,
}: ResourceModalProps) {
  return (
    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
      <DialogContent
        size="2xl"
        className="flex flex-col gap-4 p-0 overflow-hidden"
      >
        <DialogHeader className="px-6 pt-6 pb-0">
          <DialogTitle className="text-h5">{title}</DialogTitle>
          {tags && tags.length > 0 && (
            <div className="flex flex-wrap gap-1.5 pt-1">
              {tags.map((tag) => (
                <Badge key={tag} variant="secondary">
                  {tag}
                </Badge>
              ))}
            </div>
          )}
        </DialogHeader>

        {videoUrl && (
          <div className="aspect-video w-full bg-foreground">
            <iframe
              src={videoUrl}
              title={title}
              className="h-full w-full"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            />
          </div>
        )}

        {attachments && attachments.length > 0 && (
          <div className="flex flex-col gap-2 px-6 pb-6">
            <p className="text-body-small font-medium text-foreground">
              Attachments
            </p>
            <div className="flex flex-col gap-1">
              {attachments.map((attachment, i) => (
                <a
                  key={i}
                  href={attachment.url}
                  download
                  className="flex items-center gap-2 text-body-small text-primary hover:underline"
                >
                  <Download className="size-3.5 shrink-0" />
                  {attachment.name}
                </a>
              ))}
            </div>
          </div>
        )}

        {(!attachments || attachments.length === 0) && <div className="pb-2" />}
      </DialogContent>
    </Dialog>
  );
}