import { type FC } from 'react'
import { Location } from 'iconsax-react'
import Error from '@/components/Error'

type LocationInputProps = {
    label?: string
    latitude?: number
    longitude?: number
    onClick: () => void
    error_text?: string
}

const LocationInput: FC<LocationInputProps> = ({
    label,
    latitude,
    longitude,
    onClick,
    error_text,
}) => {
    const getLocationDisplay = () => {
        if (latitude && longitude) {
            return `${latitude.toFixed(6)}, ${longitude.toFixed(6)}`
        }
        return 'روی نقشه کلیک کنید'
    }

    return (
        <div className='mt-8'>
            {label && <div className='text-sm mb-1'>{label}</div>}
            <div
                onClick={onClick}
                className='w-full bg-white h-10 text-black px-4 text-xs rounded-xl border border-border flex items-center gap-2 cursor-pointer mt-1'
            >
                <Location size={20} color='#8C90A3' />
                <span className='flex-1 text-right'>{getLocationDisplay()}</span>
            </div>
            {error_text && (
                <Error errorText={error_text} />
            )}
        </div>
    )
}

export default LocationInput