/**
 * Popular Services Section
 * 
 * Displays popular services from Laravel API
 */

import Link from 'next/link';
import { getTranslations } from 'next-intl/server';
import { ServiceCard } from '@shinecode/ui';
import type { Service } from '@shinecode/api-client/types';

interface PopularServicesProps {
  services: Service[];
  locale: string;
}

export async function PopularServices({ services, locale }: PopularServicesProps) {
  const t = await getTranslations({ locale, namespace: 'home' });

  return (
    <section className="py-20 md:py-32 bg-surface-soft">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6 border-b border-border pb-6">
          <div className="max-w-2xl">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-medium text-ink tracking-tight mb-4">{t('popularServices')}</h2>
            <p className="text-lg text-muted">{t('popularServicesDescription')}</p>
          </div>
          <Link href={`/${locale}/search`} className="group flex items-center text-brand-600 hover:text-brand-700 font-medium transition-colors">
            <span className="me-2">{t('viewAllServices')}</span>
            <span className="transform transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1">→</span>
          </Link>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {services.map((service) => (
            <div key={service.id} className="transition-transform duration-300 hover:-translate-y-1">
              <ServiceCard service={service} locale={locale} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}