import { Heart, MessageCircle, X } from 'lucide-react';
import type { Pet } from '@/data/pets';

interface MatchModalProps {
  pet: Pet;
  onClose: () => void;
}

export function MatchModal({ pet, onClose }: MatchModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
      <div className="animate-match-pop relative max-w-sm rounded-3xl bg-gradient-to-br from-primary via-primary to-secondary p-1 shadow-2xl">
        <div className="rounded-3xl bg-card p-8 text-center">
          {/* Close button */}
          <button
            onClick={onClose}
            className="absolute right-4 top-4 rounded-full p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
          >
            <X className="h-5 w-5" />
          </button>

          {/* Hearts animation */}
          <div className="mb-4 flex justify-center">
            <div className="animate-float relative">
              <Heart className="h-16 w-16 fill-primary text-primary" />
              <Heart className="absolute -right-4 -top-2 h-8 w-8 fill-secondary text-secondary opacity-70" />
              <Heart className="absolute -left-3 top-4 h-6 w-6 fill-accent text-accent opacity-60" />
            </div>
          </div>

          <h2 className="font-display text-3xl font-bold text-primary">It's a Match!</h2>
          <p className="mt-2 font-body text-muted-foreground">
            You and <span className="font-semibold text-foreground">{pet.name}</span> liked each other!
          </p>

          {/* Pet image */}
          <div className="mx-auto mt-6 h-32 w-32 overflow-hidden rounded-full border-4 border-primary shadow-lg">
            <img
              src={pet.image}
              alt={pet.name}
              className="h-full w-full object-cover"
            />
          </div>

          {/* Actions */}
          <div className="mt-8 flex flex-col gap-3">
            <button
              onClick={onClose}
              className="flex items-center justify-center gap-2 rounded-full bg-primary px-6 py-3 font-display font-semibold text-primary-foreground shadow-lg transition-all hover:scale-105 hover:shadow-xl"
            >
              <MessageCircle className="h-5 w-5" />
              Send a Woof!
            </button>
            <button
              onClick={onClose}
              className="rounded-full px-6 py-3 font-body font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              Keep Swiping
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}