'use client';

import { ServiceCard } from '@/components/main-page/serviceCard';
import { Service } from '@/lib/api';
import { useRouter } from 'next/navigation';

const SERVICE_ICONS = [
    "/main-page/services/Services1.svg",
    "/main-page/services/Services2.svg",
    "/main-page/services/Services3.svg",
    "/main-page/services/Services4.svg",
];

const SERVICE_ROUTES: Record<string, string> = {
    'وَثِق عقد الإيجار': '/rental-contracts',
    'Rental Contract Authentication': '/rental-contracts',
    'طلب حساب تمويل': '/mortgage-calculator',
    'Finance Account Request': '/mortgage-calculator',
};

interface ServicesContentProps {
    initialServices: Service[];
}

export default function ServicesContent({ initialServices }: ServicesContentProps) {
    const router = useRouter();

    const handleServiceClick = (service: Service) => {
        const route = SERVICE_ROUTES[service.title];
        if (route) {
            router.push(route);
        } else {
        }
    };

    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {initialServices.map((service, index) => (
                <div key={service.id} className="flex justify-center">
                    <ServiceCard
                        icon={SERVICE_ICONS[index % SERVICE_ICONS.length]}
                        title={service.title}
                        description={service.description}
                        onDetailsClick={() => handleServiceClick(service)}
                    />
                </div>
            ))}
        </div>
    );
}