import React from 'react';
import { ArrowRight } from '@untitledui/icons';
import { Button } from '../elements';
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="text-display-sm font-semibold text-primary md:text-display-md">
                                {title}
                            </h2>
                        )}
                        {subtitle && (
                            <p className="mt-4 text-lg text-tertiary 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) + '...' : '');
                            
                            // Get service image from photo_attachments
                            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">
                                        {/* Service Image using PhotoWithFallback */}
                                        <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"
                                            />
                                        </div>

                                        <div className="flex flex-col gap-4">
                                            <div>
                                                <h3 className="text-lg font-semibold text-primary">{service.name}</h3>
                                                {description && (
                                                    <p className="mt-1 text-md text-tertiary">
                                                        {description}
                                                    </p>
                                                )}
                                            </div>

                                            <Button
                                                color="link-color"
                                                size="lg"
                                                href={`/services/${service.slug}`}
                                                iconTrailing={ArrowRight}
                                            >
                                                Learn more
                                            </Button>
                                        </div>
                                    </div>
                                </li>
                            );
                        })}
                    </ul>
                ) : (
                    <div className="text-center py-12">
                        <p className="text-gray-500">No services available</p>
                    </div>
                )}
            </div>
        </section>
    );
};
