'use client';
import React from 'react';
import {Element, LocationProps, SubElement} from '@/hooks/settings/useLocations';
import {MapPin, Navigation} from 'lucide-react';
import {useTranslations} from '@/lib/i18n';

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 pb-3 last:border-b-0">
                                <div className="flex items-center gap-2 mb-1">
                                    <MapPin className="text-primary w-3 h-3" strokeWidth={1.75}/>
                                    <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">
                                                    <Navigation className="text-muted w-2 h-2 mt-1.5"
                                                                strokeWidth={1.75}/>
                                                    <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>
    );
}