import Link from "next/link";
import Image from "next/image";
import React from "react";

function FeatureCard({ img, title, subtitle, href }: Feature) {
  return (
    <Link href={href} className="group">
      <div className="flex flex-col items-center w-32 sm:w-40 md:w-48 lg:w-56 flex-shrink-0 rounded-2xl transition-colors duration-300 group-hover:bg-[#e6f0fb] cursor-pointer p-4">
        <Image
          src={img}
          width={120}
          height={120}
          alt={title}
          loading="lazy"
          className="transition-transform duration-300 group-hover:scale-105"
        />
        <div className="shuheiti text-center text-sm sm:text-base md:text-lg font-medium mt-2 text-[#6685B8] transition-colors duration-300 group-hover:text-[#1870ff]">
          {title}
        </div>
        <div className="shuheiti text-center text-[10px] sm:text-xs md:text-sm opacity-60 text-[#6685B8] transition-colors duration-300 group-hover:text-[#1870ff]">
          {subtitle}
        </div>
      </div>
    </Link>
  )
}

export default  FeatureCard