import Link from "next/link";
import { Globe, Bot, Workflow, Server, LifeBuoy, ArrowUpRight } from "lucide-react";
import type { ServiceMeta } from "@/config/services";

const iconMap = {
  Globe,
  Bot,
  Workflow,
  Server,
  LifeBuoy,
};

interface ServiceCardProps {
  service: ServiceMeta;
}

export default function ServiceCard({ service }: ServiceCardProps) {
  const Icon = iconMap[service.icon];
  const isGreen = service.accent === "green";

  return (
    <Link
      href={service.href}
      className={`group relative flex flex-col justify-between rounded-2xl border border-white/[0.06] bg-base-900/60 p-6 transition-all hover:-translate-y-1 clip-corner ${
        isGreen
          ? "hover:border-green-500/30 hover:shadow-glow-green"
          : "hover:border-blue-500/30 hover:shadow-glow"
      }`}
    >
      <div>
        <div
          className={`mb-5 flex h-11 w-11 items-center justify-center rounded-xl border ${
            isGreen
              ? "border-green-500/25 bg-green-500/10 text-green-400"
              : "border-blue-500/25 bg-blue-500/10 text-blue-400"
          }`}
        >
          <Icon size={20} strokeWidth={1.75} />
        </div>
        <h3 className="mb-2 font-display text-lg font-medium text-ink-100">
          {service.title}
        </h3>
        <p className="text-sm leading-relaxed text-ink-500">
          {service.description}
        </p>
      </div>
      <div className="mt-6 flex items-center gap-1.5 text-sm font-medium text-ink-300 group-hover:text-ink-100">
        Подробнее
        <ArrowUpRight
          size={16}
          className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5"
        />
      </div>
    </Link>
  );
}