'use client';
import React from 'react';
import {LocationProps, Element, SubElement} from '@/hooks/settings/useLocations';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faLocationDot, faMapPin} from '@fortawesome/free-solid-svg-icons';
import {useTranslations} from 'next-intl';

interface LocationEditorDetailProps {
    section: LocationProps;
}

/**
 * LocationEditorDetail - Version sidebar lecture seule
 * Layout linéaire simple, juste les infos essentielles empilées
 * PAS de CollapsableArea, PAS de grids
 */
export default function LocationEditorDetail({
    section,
}: LocationEditorDetailProps): React.JSX.Element {
    const t = useTranslations();

    return (
        <div>
            <h3 className="text-text-primary font-semibold text-base mb-4">{section.name}</h3>

            {section.elements.length === 0 ? (
                <p className="text-muted text-sm">{t('locationComponent.noElementAvailable')}</p>
            ) : (
                <div className="space-y-4">
                    {section.elements.map(function (element: Element): React.JSX.Element {
                        return (
                            <div key={element.id} className="border-b border-secondary/30 pb-3 last:border-b-0">
                                <div className="flex items-center gap-2 mb-1">
                                    <FontAwesomeIcon icon={faMapPin} className="text-primary w-3 h-3"/>
                                    <span className="text-text-primary font-medium text-sm">{element.name}</span>
                                </div>
                                {element.description && (
                                    <p className="text-text-secondary text-xs ml-5 mb-2">{element.description}</p>
                                )}

                                {element.subElements.length > 0 && (
                                    <div className="ml-5 mt-2 space-y-1">
                                        {element.subElements.map(function (subElement: SubElement): React.JSX.Element {
                                            return (
                                                <div key={subElement.id} className="flex items-start gap-2">
                                                    <FontAwesomeIcon icon={faLocationDot} className="text-muted w-2 h-2 mt-1.5"/>
                                                    <div>
                                                        <span className="text-text-primary text-xs">{subElement.name}</span>
                                                        {subElement.description && (
                                                            <p className="text-muted text-xs">{subElement.description}</p>
                                                        )}
                                                    </div>
                                                </div>
                                            );
                                        })}
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </div>
            )}
        </div>
    );
}