import React from 'react';
import { Shield } from 'lucide-react';
import type { Wildlife } from '@/lib/api';

const statusColor: Record<string, string> = {
  'Threatened':    'bg-red-500/20 text-red-400 border-red-500/30',
  'Protected':     'bg-amber-500/20 text-amber-400 border-amber-500/30',
  'Least Concern': 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
  'Endangered':    'bg-red-700/30 text-red-300 border-red-600/30',
};

export default function WildlifeCard({ species }: { species: Wildlife }) {
  const colors = statusColor[species.status] ?? 'bg-stone-500/20 text-stone-400 border-stone-500/30';
  return (
    <div className="bg-surfaceGreen border border-white/5 rounded-2xl overflow-hidden hover:border-gold/20 transition-all group">
      {/* Image */}
      <div className="aspect-[4/3] bg-black/40 overflow-hidden">
        {species.imageUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={species.imageUrl}
            alt={species.name}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-6xl">🦉</div>
        )}
      </div>
      <div className="p-5 space-y-3">
        {/* Status */}
        <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border ${colors}`}>
          <Shield size={10} />
          {species.status}
        </span>
        <div>
          <h3 className="font-bold text-white text-lg leading-tight">{species.name}</h3>
          <p className="text-xs text-stone-500 italic mt-0.5">{species.scientificName}</p>
        </div>
        <p className="text-sm text-stone-400 leading-relaxed line-clamp-3">{species.description}</p>
        <div className="pt-2 border-t border-white/5">
          <p className="text-xs text-stone-500 font-medium">
            <span className="text-stone-400">Habitat: </span>{species.habitat}
          </p>
        </div>
      </div>
    </div>
  );
}