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

interface ServicesHomeProps {
    services: Service[];
    title?: string;
    subtitle?: string;
}

export const ServicesHome = ({
    services = [],
    title = "",
    subtitle = "",
}: ServicesHomeProps) => {
    // Show all services
    const displayServices = services;

    return (
        <section className="py-16 md:py-20 lg:py-24 bg-secondary">
            <div className="mx-auto max-w-7xl px-4 md:px-8">
                {/* Section Header - Centered */}
                <div className="mx-auto max-w-3xl text-center mb-12">
                    <h2 className="font-display text-display-md font-normal text-fg-primary mb-4">
                        {title}
                    </h2>
                    <p className="font-body text-base text-secondary leading-normal">
                        {subtitle}
                    </p>
                </div>

                {/* Services Grid - 4 columns, centered when incomplete */}
                <div className="flex flex-wrap justify-center gap-6">
                    {displayServices.map((service) => (
                        <a
                            key={service.id}
                            href={`/services/${service.slug}`}
                            className="group block bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 w-full md:w-[calc(50%-0.75rem)] lg:w-[calc(25%-1.125rem)] flex flex-col"
                        >
                            {/* Service Image */}
                            <div className="relative w-full h-56 overflow-hidden flex-shrink-0">
                                <PhotoWithFallback
                                    photoUrl={service.photo_attachments?.[0]?.photo?.large_url || service.photo_attachments?.[0]?.photo?.medium_url || ''}
                                    photoAlt={service.photo_attachments?.[0]?.photo?.title || service.name}
                                    fallbackId={`service-${service.id}`}
                                    className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                                />
                            </div>

                            {/* Service Content */}
                            <div className="p-6">
                                <h3 className="font-body text-base font-semibold uppercase tracking-wide text-fg-primary mb-3 leading-tight">
                                    {service.name}
                                </h3>
                                
                                {service.summary && (
                                    <p className="font-body text-sm text-tertiary leading-relaxed">
                                        {service.summary}
                                    </p>
                                )}
                            </div>
                        </a>
                    ))}
                </div>
            </div>
        </section>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('services-home', 'barelux', ServicesHome);
