"use client";

import Image from "next/image";
import StarRating from "@/components/ui/StarRating";
import { CheckCircle } from "lucide-react";

interface Hospital {
  id: number;
  name: string;
  location: string;
  imageUrl: string | null;
  rating: string | null;
  isVerified: boolean;
  isPartner: boolean;
}

export default function HospitalNetwork({ hospitals }: { hospitals: Hospital[] }) {
  return (
    <section className="py-10 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <h2 className="text-lg font-bold text-slate-900 mb-5">Verified Hospital Network</h2>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
          {hospitals.map((hospital, i) => (
            <div
              key={hospital.id}
              className="relative rounded-xl overflow-hidden group cursor-pointer animate-fade-in-up border border-slate-100 hover:shadow-lg transition-all"
              style={{ animationDelay: `${i * 100}ms`, height: 160 }}
            >
              {hospital.imageUrl && (
                <Image
                  src={hospital.imageUrl}
                  alt={hospital.name}
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-300"
                />
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-3">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-white text-sm font-semibold">{hospital.name}</p>
                    <div className="flex items-center gap-1 mt-0.5">
                      <StarRating rating={Math.round(parseFloat(hospital.rating || "4"))} />
                    </div>
                  </div>
                  {hospital.isVerified && (
                    <span className="flex items-center gap-1 bg-green-500/90 text-white text-[10px] px-2 py-0.5 rounded-full font-medium">
                      <CheckCircle className="w-2.5 h-2.5" />
                      Verified Partner
                    </span>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}