import Link from "next/link";

import { Badge } from "@/components/badge";
import { Card } from "@/components/card";
import { ArrowLinkIcon, getServiceIcon, IconMark } from "@/components/icon-system";
import { FadeItem } from "@/components/reveal";

type ServiceCardProps = {
  category: string;
  title: string;
  description: string;
  href: string;
  iconKey?: string;
  featured?: boolean;
};

const categoryLabels: Record<string, string> = {
  ecommerce: "eCommerce",
  b2b: "B2B",
  wms: "WMS",
  erp_integrations: "BizniSoft",
  courier_integrations: "Kuriri",
  automation: "Automatizacija",
  consulting: "Konsultacije",
  hotel: "Beds24",
  vps: "Hosting",
  pda: "PDA",
};

export function ServiceCard({ category, title, description, href, iconKey, featured }: ServiceCardProps) {
  const Icon = getServiceIcon(iconKey ?? category);
  const label = categoryLabels[category] ?? category;

  return (
    <FadeItem>
      <Card className="relative flex h-full min-h-[21rem] flex-col overflow-hidden bg-white p-0 shadow-[0_24px_80px_rgb(0_0_0_/_0.18)] hover:border-accent-sky/35 hover:shadow-[0_30px_90px_rgb(0_0_0_/_0.22)]">
        <div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-primary via-accent-sky to-transparent" />
        <div className="border-b border-slate-200 bg-white px-6 py-5">
          <div className="flex items-start justify-between gap-4">
            <IconMark icon={Icon} className="border-primary/15 bg-primary-50/70 !text-primary-700 group-hover:border-primary/30 group-hover:bg-primary-50" />
            {featured ? (
              <Badge className="border-primary/20 bg-primary-50 !text-primary-700">Najtraženije</Badge>
            ) : (
              <Badge tone="slate" className="bg-white text-slate-800">
                {label}
              </Badge>
            )}
          </div>
        </div>
        <div className="flex flex-1 flex-col p-6">
          <h3 className="text-xl font-semibold leading-7 text-slate-950">{title}</h3>
          <p className="mt-4 flex-1 text-sm leading-6 text-slate-700">{description}</p>
          <div className="mt-6 grid gap-2 border-t border-slate-200/75 pt-5">
            {["proces", "integracija", "operativa"].map((item, index) => (
              <div key={item} className="flex items-center justify-between text-xs font-semibold uppercase text-slate-600">
                <span>{item}</span>
                <span
                  className={
                    index === 0
                      ? "h-1.5 w-24 rounded-full bg-primary shadow-[0_0_0_1px_rgb(0_105_204_/_0.08)]"
                      : "h-1.5 w-16 rounded-full bg-slate-300"
                  }
                />
              </div>
            ))}
          </div>
          <Link
            href={href}
            className="group/link mt-6 inline-flex min-h-10 w-fit items-center gap-2 rounded-full border border-primary/15 bg-primary-50 px-4 text-sm font-semibold text-primary-700 transition hover:border-primary/30 hover:bg-primary hover:text-white"
          >
            Pregled rešenja
            <ArrowLinkIcon />
          </Link>
        </div>
      </Card>
    </FadeItem>
  );
}