import React from 'react'; import Image from 'next/image' import { componentStyles, mergeClasses } from '@/lib/styles/designSystem'; import type { Service } from '@/types/service'; interface ServiceCardProps { service: Service; onServiceClick: (service: Service) => void; className?: string; } export const ServiceCard: React.FC = ({ service, onServiceClick, className = '', }) => { const cardClasses = mergeClasses( 'group relative p-6 sm:p-8 transition-all duration-300 cursor-pointer', componentStyles.card.base, componentStyles.card.gradient, 'hover:-translate-y-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 active:scale-95', className ); const handleClick = () => { onServiceClick(service); }; return (
{/* Icon */}
{typeof service.image === 'string' ? ( {service.icon} ) : ( {service.icon} )}
{/* Service name */}

{service.name}

{/* Short description */}

{service.description.split('.')[0]}.

{/* Hover effect */}
); };