'use client';

import { useTranslations } from 'next-intl';
import Image from 'next/image';
import Link from 'next/link';
import { ArrowRight, ArrowLeft } from 'lucide-react';
import { Reveal } from '@/components/ui/reveal';
import type { Locale } from '@/i18n/config';

export interface ServiceCardData {
  slug: string;
  title: string;
  summary: string;
  heroImage?: string;
}

export function ServiceCard({
  service,
  locale,
  delay = 0,
  index
}: {
  service: ServiceCardData;
  locale: Locale;
  delay?: number;
  index?: number;
}) {
  const Arrow = locale === 'ar' ? ArrowLeft : ArrowRight;
  const t = useTranslations('common');

  return (
    <Reveal variant="up" delay={delay} className="h-full">
      <Link
        href={`/${locale}/services/${service.slug}`}
        className="group flex h-full flex-col overflow-hidden rounded-2xl border border-graphite-800/10 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-copper-600/10"
      >
        {service.heroImage && (
          <div className="relative aspect-[16/10] overflow-hidden bg-graphite-900/5">
            <Image
              src={service.heroImage}
              alt={service.title}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-110"
              sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-graphite-950/40 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
            {index && (
              <span className="absolute left-4 top-4 flex h-9 w-9 items-center justify-center rounded-full bg-copper-500 font-display text-sm font-bold text-graphite-950 shadow-lg">
                {String(index).padStart(2, '0')}
              </span>
            )}
          </div>
        )}
        <div className="flex flex-1 flex-col justify-between p-6">
          <div>
            <h3 className="font-display text-lg font-semibold">{service.title}</h3>
            <p className="mt-2 text-sm text-graphite-900/60">{service.summary}</p>
          </div>
          <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-copper-600">
            {t('learnMore')}
            <Arrow className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-1 rtl:group-hover:-translate-x-1" />
          </span>
        </div>
      </Link>
    </Reveal>
  );
}