import Link from "next/link";
import type { CareService } from "@/lib/types";

export default function ServiceCard({ service }: { service: CareService }) {
  return (
    <Link
      href={`/healthcare/${service.slug}`}
      className="group block rounded-xl2 overflow-hidden bg-neutral-100 border border-neutral-200 hover:border-accent-400 transition-colors"
    >
      <div
        className="aspect-[16/10] bg-neutral-300 bg-cover bg-center"
        style={{ backgroundImage: `url(${service.heroImage})` }}
      />
      <div className="p-6">
        <h3 className="font-display text-lg text-neutral-900 group-hover:text-accent-500">
          {service.title}
        </h3>
        <p className="mt-2 text-sm text-neutral-600 line-clamp-3">{service.shortDescription}</p>
      </div>
    </Link>
  );
}