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

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

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

    return (
        <section>
            <div className="mx-auto max-w-container px-4 md:px-8">
                <div className="mb-12 text-center">
                    <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
                        {title}
                    </h2>
                </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">
                                    <div className="w-full h-64 mb-6 overflow-hidden">
                                        <PhotoWithFallback
                                            item={service}
                                            fallbackId={service.id}
                                            className="w-full h-full object-cover"
                                        />
                                    </div>
                                    
                                    <p className="text-xs font-body font-normal uppercase tracking-widest mb-2" style={{ color: 'var(--color-text-brand-secondary)' }}>
                                        SERVICE
                                    </p>
                                    
                                    <h3 className="font-display text-2xl font-normal text-fg-primary mb-4">
                                        {service.name}
                                    </h3>
                                    
                                    {description && (
                                        <p className="font-body text-base leading-relaxed text-tertiary mb-6 flex-grow">
                                            {description}
                                        </p>
                                    )}
                                    
                                    <a
                                        href={`/services/${service.slug}`}
                                        className="font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
                                        style={{ color: 'var(--color-text-brand-accent)' }}
                                    >
                                        Discover more
                                    </a>
                                </div>
                            );
                        })}
                    </div>
                ) : (
                    <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-home', 'aman', ServicesHome);
