import React from 'react';
import Link from 'next/link';
import { ServiceType } from '@/types';

interface ServiceCardProps {
    service: ServiceType;
}

const ServiceCard: React.FC<ServiceCardProps> = ({ service }) => {
    return (
        <div className="service1-boxarea h-100 d-flex flex-column" style={{ marginBottom: 0 }}>
            <div className="icons">
                <img src={service.icon} alt={service.title} />
            </div>
            <div className="space24"></div>
            <div className="space16"></div>
            <h4 className='text-white'>{service.title}</h4>
            <div className="space16"></div>
            <p>{service.description}</p>
            <div className="mt-auto">
                <div className="space24"></div>
                <h5>{service.id.toString().padStart(2, '0')}</h5>
            </div>
        </div>
    );
};

export default ServiceCard;
