import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { ElementType } from 'react';

interface ToolCardProps {
  title: string;
  description: string;
  icon: ElementType;
  url: string;
  index: number;
  badges?: string[];
}

export default function ToolCard({ title, description, icon: Icon, url, index, badges }: ToolCardProps) {
  return (
    <Link
      href={url}
      className="group relative glass rounded-2xl p-6 flex flex-col h-full transition-all duration-300 border border-white/[0.06] hover:border-primary/35 hover:shadow-[0_12px_48px_rgba(139,92,246,0.11)] overflow-hidden"
      style={{ animation: `slideUp 0.5s ease-out ${0.05 * index}s both` }}
    >
      {/* Top shimmer accent on hover */}
      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-primary/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />

      {/* Radial glow on hover */}
      <div className="absolute top-0 left-0 w-36 h-36 rounded-full bg-primary/[0.07] blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none -translate-x-6 -translate-y-6" />

      {/* Icon */}
      <div className="w-12 h-12 rounded-2xl bg-primary/10 border border-primary/15 flex items-center justify-center mb-5 shrink-0 transition-all duration-300 group-hover:bg-primary/20 group-hover:border-primary/30 group-hover:shadow-[0_0_24px_rgba(139,92,246,0.22)]">
        <Icon className="w-5 h-5 text-primary" />
      </div>

      {/* Title */}
      <h3 className="text-base font-semibold text-foreground/80 group-hover:text-foreground transition-colors duration-200 mb-2 leading-snug">
        {title}
      </h3>

      {/* Description */}
      <p className="text-[13px] text-muted-foreground/50 leading-relaxed flex-1 mb-5">
        {description}
      </p>

      {/* Footer: badges + arrow */}
      <div className="flex items-end justify-between gap-2">
        {badges && badges.length > 0 ? (
          <div className="flex flex-wrap gap-1">
            {badges.map((badge) => (
              <span
                key={badge}
                className="text-[9px] font-mono px-1.5 py-0.5 rounded-md bg-primary/[0.07] border border-primary/20 text-primary/55 transition-colors duration-200 group-hover:border-primary/35 group-hover:text-primary/75"
              >
                {badge}
              </span>
            ))}
          </div>
        ) : (
          <span />
        )}
        <div className="w-7 h-7 rounded-xl glass border border-white/[0.06] flex items-center justify-center shrink-0 transition-all duration-200 group-hover:border-primary/30 group-hover:bg-primary/10">
          <ArrowRight className="w-3.5 h-3.5 text-muted-foreground/30 group-hover:text-primary group-hover:translate-x-0.5 transition-all duration-200" />
        </div>
      </div>
    </Link>
  );
}