import { Link, NavLink, type To } from "react-router";
import { Button } from "./ui";

type IServiceItemProps = {
  title: string;
  icon: React.ReactNode;
  summary: string;
  features: string[];
  to: To;
};

const ServiceItem = ({
  title,
  icon,
  summary,
  features,
  to,
}: IServiceItemProps) => {
  return (
    <div className="p-8 text-center bg-white inset-ring rounded-lg inset-ring-red-800/90 hover:bg-red-700 group hover:text-white mb-4">
      <div className="bg-gray-200 group-hover:bg-red-600 rounded-full w-18 h-18 flex items-center justify-center mx-auto">
        {icon}
      </div>
      <div className="flex items-center h-16 my-6 max-w-9/10 mx-auto">
        <h3 className="text-red-800 font-bold text-2xl hover:text-white group-hover:text-white">
          {title}
        </h3>
      </div>
      <p className="my-10 text-base">{summary}</p>
      <ul className="font-semibold text-lg/10 mb-10">
        {features.map((feature, index) => (
          <li key={index}>{feature}</li>
        ))}
      </ul>
    </div>
  );
};

export { ServiceItem };
