"use client";

import Image from "next/image";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

const schedules = [
  {
    id: "jee-mains",
    name: "JEE Mains Test Series",
    image: "https://cdn.prejee.com/prejee/beta/iit.png",
    scheduleLink: "https://cdn.prejee.com/prejee/schedule/mains-2026.pdf"
  },
  {
    id: "neet",
    name: "NEET Test Series",
    image: "https://cdn.prejee.com/prejee/beta/aiims-delhi.svg",
    scheduleLink: "https://cdn.prejee.com/prejee/schedule/neet-2026.pdf"
  },
  {
    id: "combo",
    name: "JEE Mains + Advanced",
    image: "https://cdn.prejee.com/prejee/beta/JEEMains_prejee.webp",
    scheduleLink: "https://cdn.prejee.com/prejee/schedule/mains+advanced.pdf"
  }
];

interface ScheduleDialogProps {
  children: React.ReactNode;
}

export default function ScheduleDialog({ children }: ScheduleDialogProps) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        {children}
      </DialogTrigger>
      <DialogContent className="max-w-xs sm:max-w-lg md:max-w-xl w-full">
        <DialogHeader>
          <DialogTitle>Download Schedule</DialogTitle>
          <DialogDescription>
            Choose your test series to download the schedule
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-wrap gap-8 justify-center">
          {schedules.map((schedule) => (
            <div key={schedule.id} className="flex flex-col items-center justify-between w-36 h-44 bg-white rounded-xl border border-gray-200 shadow-sm p-4">
              <div className="w-14 h-14 flex items-center justify-center bg-gray-50 rounded-lg border mb-2">
                <Image
                  src={schedule.image}
                  alt={schedule.name}
                  width={48}
                  height={48}
                  className="object-contain"
                />
              </div>
              <div className="font-medium text-gray-900 text-sm text-center mb-2">{schedule.name}</div>
              <Link
                href={schedule.scheduleLink}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full"
              >
                <Button size="sm" variant="outline" className="border-indigo-600 text-indigo-600 w-full cursor-pointer">
                  Download
                </Button>
              </Link>
            </div>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
}