import Link from "next/link";
import ServiceArrow  from "@/shared/icons/home-page/serviceArrow.svg";
import { serviceIcon, TSitePageName } from "./data";

type TCardProps = {
	data: TSitePageName;
};

const Card = ({ data: { name, href, key, description } }: TCardProps) => {
	return (
		<Link
			href={href}
			className='text-black-color p-6 gap-4 rounded-lg flex flex-col hover:outline-1 hover:outline-[#E9E9E9] hover:shadow-[0_10px_32px_0_#5356A633] transition-all duration-300 ease-in-out'>
			<span className='flex items-center justify-center flex-shrink-0 bg-[#F9F0F2] w-fit rounded-[8px] p-2'>{serviceIcon[key]?.icon}</span>
			<span
				className='flex-1 font-normal text-[24px] leading-[140%] align-middle'
				title={name}>
				{name}
			</span>
      <div className="flex flex-col items-end gap-6">
        <span className="font-medium text-[18px] leading-[140%]">{description}</span>
        <ServiceArrow />
      </div>
		</Link>
	);
};

export default Card;