import FeatureCard from '@/components/site/feature-card';
import { common } from '@/content/common';
import { useContent } from '@/hooks/use-locale';

type ServiceGridProps = {
    /** `summary` for overviews, `description` for the official wording. */
    detail?: 'summary' | 'description';
};

/** The eight official PAJ services as a 4-column card grid. */
export default function ServiceGrid({ detail = 'summary' }: ServiceGridProps) {
    const t = useContent(common);

    return (
        <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
            {t.services.map((service, index) => {
                const number = String(index + 1).padStart(2, '0');

                return (
                    <FeatureCard
                        key={service.title}
                        icon={service.icon}
                        tag={`${number} / ${t.serviceTag}`}
                        title={`${index + 1}. ${service.title}`}
                        description={
                            <>
                                {service.expansion && (
                                    <span className="text-on-surface font-semibold">
                                        {service.expansion}:{' '}
                                    </span>
                                )}
                                {service[detail]}
                            </>
                        }
                        footer={service.outcome}
                    />
                );
            })}
        </div>
    );
}