"use client";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { FileText } from "lucide-react";

interface DialogCampaignDetailProps {
  isOpen: boolean;
  onClose: () => void;
  data?: {
    durasi: string;
    media: string;
    tujuan: string;
    materi: string;
    status: string;
  };
}

export default function DialogCampaignDetail({
  isOpen,
  onClose,
  data,
}: DialogCampaignDetailProps) {
  if (!data) return null;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-lg font-semibold">Detail</DialogTitle>
        </DialogHeader>

        <div className="space-y-4">
          {/* Status */}
          <div>
            <span className="bg-green-100 text-green-700 border border-green-600 px-3 py-1 rounded-full text-xs font-medium">
              {data.status}
            </span>
          </div>

          {/* Detail Info */}
          <div className="space-y-2 text-sm">
            <p>
              <span className="text-gray-500">Durasi</span>
              <br />
              <span className="font-semibold">{data.durasi}</span>
            </p>

            <p>
              <span className="text-gray-500">Media</span>
              <br />
              <span className="font-semibold">{data.media}</span>
            </p>

            <p>
              <span className="text-gray-500">Tujuan</span>
              <br />
              <span className="font-semibold">{data.tujuan}</span>
            </p>

            <p>
              <span className="text-gray-500">Materi Promote</span>
            </p>

            {/* File Box */}
            <div className="border rounded-lg p-3 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <FileText className="text-gray-500" />
                <div>
                  <p className="text-sm font-medium text-gray-800">
                    Report_name_T1.pdf
                  </p>
                  <p className="text-xs text-gray-500">23.5MB</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <DialogFooter className="flex justify-end gap-3 mt-4">
          <Button variant="outline" onClick={onClose} className="w-28">
            Cancel
          </Button>
          <Button className="bg-blue-600 hover:bg-blue-700 text-white w-28">
            Next
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}