'use client';

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

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

// دالة ذكية لدمج منطق الروابط الخاص بك مع تحديثات المصدر
const getServiceLink = (service: Service) => {
  const title = service.title || '';

  // روابط خاصة بك (من SERVICE_ROUTES السابقة)
  if (title.includes('تمويل') || title.includes('Finance')) return '/mortgage-calculator';

  // روابط من المصدر مع تعديلها لتناسب مساراتك
  if (title.includes('سوق عقارك') || service.id === 2) return '/listings';
  if (title.includes('عقد الإيجار') || title.includes('وَثِق عقد') || service.id === 1) return '/rental-contracts';

  return '/advertising-license';
};

interface ServicesProps {
  services?: Service[];
}

export function Services({ services = [] }: ServicesProps) {
  const router = useRouter();

  return (
    <section className="py-10">
      <div className="lg:px-20 md:px-10 px-5 ">
        <SectionTitle
          title="خدماتنا موثوقة وسريعة"
          description={
            <>
              نقدّم مجموعة من الخدمات المصممة لتسهيل كل إجراءاتك العقارية والإدارية، بداية من توثيق العقود وحتى إدارة
              <br /> المعاملات بالكامل، بخطوات بسيطة وسريعة وبجودة عالية تضمن لك راحة البال.
            </>
          }
          more
          href={'/services'}
        />
      </div>

      <div className="max-w-8xl mx-auto lg:px-20 md:px-10">
        <div className="overflow-x-auto pb-4 px-5 lg:px-0 no-scrollbar">
          <div className="flex gap-6 lg:grid lg:grid-cols-3 xl:grid-cols-4">
            {services.map((service, index) => (
              <div key={service.id} className="w-[280px] flex-shrink-0 lg:w-auto lg:flex-shrink">
                <ServiceCard
                  icon={SERVICE_ICONS[index % SERVICE_ICONS.length]}
                  title={service.title}
                  description={service.description}
                  // استخدمنا طريقة upstream المختصرة مع دالة التوجيه الذكية
                  onDetailsClick={() => router.push(getServiceLink(service))}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}