import { type FC } from 'react'
import { Location } from 'iconsax-react'
import type { UserSavedAddress } from '@/pages/customers/types/Types'

interface CreateOrderAddressSelectorProps {
    addresses: UserSavedAddress[]
    selectedAddressId: string | null
    onSelectAddress: (address: UserSavedAddress) => void
    onSelectManual: () => void
}

const CreateOrderAddressSelector: FC<CreateOrderAddressSelectorProps> = ({
    addresses,
    selectedAddressId,
    onSelectAddress,
    onSelectManual,
}) => {
    if (addresses.length === 0) {
        return null
    }

    const isManualSelected = selectedAddressId === null

    return (
        <div className='mb-6'>
            <div className='text-sm mb-3'>انتخاب آدرس ذخیره‌شده</div>
            <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
                {addresses.map((address) => {
                    const isSelected = selectedAddressId === address.id

                    return (
                        <button
                            key={address.id}
                            type='button'
                            onClick={() => onSelectAddress(address)}
                            className={`text-right p-4 rounded-xl border transition-colors ${
                                isSelected
                                    ? 'border-primary bg-primary/5'
                                    : 'border-border hover:border-primary/40'
                            }`}
                        >
                            <div className='flex items-center justify-between gap-2'>
                                <div className='text-sm font-medium'>{address.title || 'آدرس'}</div>
                                {address.isDefault && (
                                    <span className='text-[10px] px-2 py-0.5 rounded-full bg-primary/10 text-primary'>
                                        پیش‌فرض
                                    </span>
                                )}
                            </div>
                            <div className='text-xs mt-2 line-clamp-2'>{address.address}</div>
                        </button>
                    )
                })}

                <button
                    type='button'
                    onClick={onSelectManual}
                    className={`text-right p-4 rounded-xl border transition-colors ${
                        isManualSelected
                            ? 'border-primary bg-primary/5'
                            : 'border-border hover:border-primary/40'
                    }`}
                >
                    <div className='flex items-center gap-2 text-sm font-medium'>
                        <Location size={16} color='#000' />
                        <span>ورود آدرس جدید</span>
                    </div>
                    <div className='text-xs text-description mt-1'>
                        آدرس را به‌صورت دستی وارد کنید
                    </div>
                </button>
            </div>
        </div>
    )
}

export default CreateOrderAddressSelector