import React from 'react';
import Link from 'next/link';
import { PhotoWithFallback } from '../elements';
import type { Service } from '../../types/api/service';

interface ServicesGridProps {
    services?: Service[] | null;
    title?: string;
    subtitle?: string;
    backgroundColor?: string;
    className?: string;
}

export const ServicesGrid = ({
    services: servicesData,
    title = "",
    subtitle = "",
    backgroundColor = "bg-secondary",
    className = "",
}: ServicesGridProps) => {
    const services = Array.isArray(servicesData) ? servicesData : [];

    return (
        <section className={`${backgroundColor} py-16 md:py-24 ${className}`}>
            <div className="mx-auto w-full max-w-container px-4 md:px-8">
                {(title || subtitle) && (
                    <div className="mx-auto mb-12 flex w-full max-w-3xl flex-col items-center text-center">
                        {title && (
                            <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
                                {title}
                            </h2>
                        )}
                        {subtitle && (
                            <p className="mt-4 font-body text-lg text-secondary md:mt-5 md:text-xl">
                                {subtitle}
                            </p>
                        )}
                    </div>
                )}

                {services.length > 0 ? (
                    <ul className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 md:gap-y-12 lg:grid-cols-3">
                        {services.map((service, index) => {
                            const description = service.summary ||
                                (service.description_markdown ? service.description_markdown.replace(/[#*\[\]()]/g, '').trim().substring(0, 120) + '...' : '');

                            const photo = service.photo_attachments?.find((pa) => pa.featured)?.photo ||
                                service.photo_attachments?.[0]?.photo;
                            const imageAlt = photo?.title || service.name;

                            return (
                                <li key={service.id || index}>
                                    <div className="flex flex-col gap-12 bg-secondary p-5 md:inline-flex md:gap-16 md:p-6 rounded-lg group">
                                        <Link href={`/services/${service.slug}`} className="block">
                                            <div className="h-48 w-full overflow-hidden rounded-lg md:h-64">
                                                <PhotoWithFallback
                                                    item={service}
                                                    fallbackId={service.id || index}
                                                    alt={imageAlt || "Service image"}
                                                    className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
                                                />
                                            </div>

                                            <h3 className="font-display text-2xl font-normal text-fg-primary mt-4 mb-3 group-hover:text-brand-accent transition-colors">
                                                {service.name}
                                            </h3>

                                            {description && (
                                                <p className="font-body text-base leading-relaxed text-tertiary mb-4">
                                                    {description}
                                                </p>
                                            )}

                                            <span className="font-body text-sm font-medium uppercase tracking-wide" style={{ color: 'var(--color-text-brand-accent)' }}>
                                                Learn More →
                                            </span>
                                        </Link>
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                ) : (
                    <div className="text-center py-12">
                        <p className="font-body text-base text-tertiary">No services available</p>
                    </div>
                )}
            </div>
        </section>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('services-grid', 'balance', ServicesGrid);
