import { PhotoWithFallback, Button } from '../elements';
import type { Service } from '../../types/api/service';

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

export const ServicesHome = ({
    services: servicesData,
    title = "",
    subtitle = "",
}: ServicesHomeProps) => {
    const services = Array.isArray(servicesData) ? servicesData.slice(0, 6) : [];

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

                {services.length > 0 ? (
                    <div className="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3">
                        {services.map((service: Service) => {
                            const description = service.summary || 
                                (service.description_markdown ? service.description_markdown.replace(/[#*\[\]()]/g, '').trim().substring(0, 150) : '');
                            
                            return (
                                <div key={service.id} className="flex flex-col group">
                                    <a href={`/services/${service.slug}`} className="block">
                                        <div className="w-full h-72 mb-6 overflow-hidden">
                                            <PhotoWithFallback
                                                item={service}
                                                fallbackId={service.id}
                                                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                                            />
                                        </div>
                                        
                                        <h3 className="font-display text-2xl font-normal text-fg-primary mb-3 group-hover:text-brand-accent transition-colors">
                                            {service.name}
                                        </h3>
                                        
                                        {description && (
                                            <p className="font-body text-base leading-relaxed text-tertiary mb-6">
                                                {description}
                                            </p>
                                        )}
                                        
                                        <span className="font-body text-sm font-medium uppercase tracking-wide" style={{ color: 'var(--color-text-brand-accent)' }}>
                                            Learn More →
                                        </span>
                                    </a>
                                </div>
                            );
                        })}
                    </div>
                ) : (
                    <div className="text-center py-12">
                        <p className="font-body text-base text-tertiary">No services available</p>
                    </div>
                )}

                {services.length > 0 && (
                    <div className="mt-16 text-center">
                        <Button
                            as="a"
                            href="/services"
                            color="primary"
                            size="lg"
                            className="font-body font-medium"
                        >
                            View All Services
                        </Button>
                    </div>
                )}
            </div>
        </section>
    );
};

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