import Link from "next/link";
import { HiOutlinePlus, HiOutlineArrowRight } from "react-icons/hi";
import { Service } from "../types";

interface ServiceCardProps {
  service: Service;
}

const ServiceCard = ({ service }: ServiceCardProps) => (
  <Link href={service.href} className="group">
    <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6 h-full hover:shadow-lg hover:from-teal-50 hover:to-teal-100 transition-all duration-300 border border-gray-200">
      <div className="text-center">
        <div className="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">
          
        </div>
        <h4 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-teal-700 transition-colors">
          {service.title}
        </h4>
        <p className="text-sm text-gray-600 mb-4 leading-relaxed">
          {service.description}
        </p>
        <div className="inline-flex items-center gap-2 text-sm font-medium text-teal-700 group-hover:text-teal-800">
         
          Apply Now
          <HiOutlineArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
        </div>
      </div>
    </div>
  </Link>
);

export default ServiceCard;