import { Skeleton } from '@/components/ui/skeleton';
import { NominatimReverseGeocodingResponse } from '../../types/Types';
import { formatSelectedAddress } from '../utils/formatAddress';

interface AddressDisplayProps {
    selectedAddress: NominatimReverseGeocodingResponse | null;
}

export const AddressDisplay = ({ selectedAddress }: AddressDisplayProps) => {
    return (
        <div className='px-4 mt-2 bg-container'>
            <span className='text-sm'>
                {!selectedAddress ? (
                    <Skeleton className='h-6 w-full' />
                ) : (
                    formatSelectedAddress(selectedAddress)
                )}
            </span>
            <hr className='border border-border mt-3 mb-10' />
        </div>
    );
};