import Link from "next/link";
import { 
  Wind, Wrench, ThermometerSun, Paintbrush, Droplet, Tv, HelpCircle, ArrowRight,
  PaintBucket, Refrigerator, Hammer, Key, Bath, PaintRoller, Grid, Layers,
  AlertTriangle, Waves, Droplets, WashingMachine, Snowflake, Store, ScanLine, Settings
} from "lucide-react";
import { cn } from "@/lib/utils";

interface IconCardProps {
  title: string;
  description: string;
  iconName: string;
  href?: string;
  className?: string;
}

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  Wind,
  Wrench,
  ThermometerSun,
  Paintbrush,
  Droplet,
  Tv,
  PaintBucket,
  Refrigerator,
  Hammer,
  Key,
  Bath,
  PaintRoller,
  Grid,
  Layers,
  AlertTriangle,
  Waves,
  Droplets,
  WashingMachine,
  Snowflake,
  Store,
  ScanLine,
  Settings,
};

export function IconCard({ title, description, iconName, href, className }: IconCardProps) {
  const Icon = iconMap[iconName] || HelpCircle;

  const cardContent = (
    <>
      <div className="p-3 rounded-lg bg-slate-100 text-primary w-fit group-hover:bg-accent-light group-hover:text-accent transition-colors duration-300">
        <Icon className="size-6" />
      </div>
      <h3 className="text-lg font-semibold text-primary font-heading mt-4 group-hover:text-accent transition-colors">
        {title}
      </h3>
      <p className="text-sm text-text-muted mt-2 leading-relaxed flex-grow">
        {description}
      </p>
      {href && (
        <div className="flex items-center gap-1 text-xs font-semibold text-primary group-hover:text-accent mt-4 transition-colors">
          <span>Dowiedz się więcej</span>
          <ArrowRight className="size-3.5 group-hover:translate-x-1 transition-transform" />
        </div>
      )}
    </>
  );

  const cardClasses = cn(
    "group border border-border rounded-xl p-6 bg-white hover:shadow-md transition-all duration-300 flex flex-col justify-between h-full",
    className
  );

  if (href) {
    return (
      <Link href={href} className={cardClasses}>
        {cardContent}
      </Link>
    );
  }

  return <div className={cardClasses}>{cardContent}</div>;
}