import { EditIcon } from '@/public/Icon';

interface AddressItemProps {
  title?: string;
  subTitle?: string;
  image?: React.ReactNode;
}

const AddressItem = ({ title, subTitle, image }: AddressItemProps) => {
  return (
    <div className="d-flex mb-3 justify-content-between align-items-start gap-3">
      <div className="d-flex justify-content-start align-items-center gap-2">
        {image}
        <div className="d-flex flex-column justify-content-start align-items-start">
          <h5 className="mb-0 text-light-grey-2 fs-9 pb-0">{title}</h5>
          <input
            type="text"
            className="pickupInput dark fs-6 fw-medium"
            placeholder={subTitle || 'California Academy of Sciences'}
            readOnly  // remove this if you want editable input
          />
        </div>
      </div>
      <EditIcon style={{ minWidth: '30px' }} />
    </div>
  );
};

export default AddressItem;