import { EditIcon } from '@/public/Icon';
import Image from 'next/image';
import AddressItem from './AddressItem';
import style from './index.module.scss';
import { useSelector } from 'react-redux';
import { RootState } from '@reduxjs/toolkit/query';

const AddressCard = () => {
  const bookingData = useSelector((state: RootState) => state.bookingJourney);
  return (
    <div className={`card ${style.dateAndTimeCard}`}>
      <img src="/images/map.png" className="card-img-top" alt="..." />
      <div className="card-body">
        <AddressItem
          title="Pickup Address"
          subTitle={bookingData?.pick_up?.address}
          image={
            <Image
              width={20}
              height={20}
              src="/images/icons/map-with-marker.png"
              alt="map-with-marker"
            />
          }
        />

        <AddressItem
          title="Destination"
          subTitle={bookingData.drop_off?.address}
          image={
            <Image
              width={20}
              height={20}
              src="/images/icons/map-with-marker.png"
              alt="map-with-marker"
            />
          }
        />

        <div className="divider"></div>

        <div className="d-flex mb-3 mt-3 justify-content-between align-items-center">
          <div className="d-flex align-items-center gap-3">
            <Image
              width={20}
              height={20}
              src="/images/icons/calendar.png"
              alt=""
            />
            <div className="d-flex flex-column justify-content-start align-items-start">
              <h6 className="mb-0 fw-bold fs-11 pb-0">{`${bookingData.time_slot?.start} - ${bookingData.time_slot?.end} - ${bookingData.date}` }</h6>
            </div>
          </div>
          <EditIcon />
        </div>

        <div className="d-flex mb-3 mt-3 justify-content-between align-items-center">
          <div className="d-flex align-items-center gap-3">
            <Image
              width={20}
              height={20}
              src="/images/icons/price.png"
              alt=""
            />
            <div className="d-flex flex-column justify-content-start align-items-start">
              <h5 className="mb-0 pb-0 fs-9 text-light-grey-2">{`$${(bookingData.price / 100).toFixed(2)}`}</h5>
              <h5 className="mb-0 pb-0 fs-11 fw-bolder ">
                0
              </h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddressCard;