import { Link } from "@tanstack/react-router";
import * as Icons from "lucide-react";
import { ArrowUpRight } from "lucide-react";

type Props = {
  slug: string;
  title: string;
  short: string;
  price: string;
  icon: string;
};

export function ServiceCard({ slug, title, short, price, icon }: Props) {
  const Icon = (Icons[icon as keyof typeof Icons] as React.ComponentType<{ className?: string }>) || Icons.Wrench;
  return (
    <Link
      to="/services/$slug"
      params={{ slug }}
      className="group relative flex flex-col rounded-2xl border border-border bg-gradient-card p-6 shadow-soft hover:shadow-elegant hover:-translate-y-1 transition-all"
    >
      <div className="flex items-start justify-between">
        <span className="grid place-items-center h-12 w-12 rounded-xl bg-emerald/10 text-emerald group-hover:bg-gradient-emerald group-hover:text-navy-deep transition-colors">
          <Icon className="h-6 w-6" />
        </span>
        <ArrowUpRight className="h-5 w-5 text-muted-foreground group-hover:text-emerald transition-colors" />
      </div>
      <h3 className="mt-5 text-lg font-semibold text-foreground">{title}</h3>
      <p className="mt-2 text-sm text-muted-foreground flex-1">{short}</p>
      <div className="mt-5 pt-5 border-t border-border flex items-center justify-between text-sm">
        <span className="text-muted-foreground">Starting at</span>
        <span className="font-display font-semibold text-navy-deep">{price}</span>
      </div>
    </Link>
  );
}