import dayjs from "dayjs";

import Card from "@/components/ui/card/card";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";

import { useBookingRequestTransferChangeContext } from "../context/booking-request-transfer-change-context";
import { BRTransferVariables } from "../libs/br-transfer-helper";

const BRTransferCurrentItem = () => {
  const { transferBookingRequest } = useBookingRequestTransferChangeContext();

  const transferVariable = new BRTransferVariables(transferBookingRequest);

  return (
    <Card className="font-medium">
      <div className="flex items-center gap-2 ">
        <div className="flex gap-1 text-base">
          <span>{transferVariable.directions.origin}</span>
          <LIcon name="ArrowRight" className="w-4" />
          <span>{transferVariable.directions.destination}</span>
        </div>
        <div className="text-sm text-gray-500">
          {transferVariable.directionInfo}
        </div>
      </div>
      <div className="text-sm text-gray-500">
        {`${dayjs(transferVariable.dates.departureDate).format(
          "DD MMM ddd HH:mm",
        )} - ${dayjs(transferVariable.dates.arrivalDate).format(
          "DD MMM ddd HH:mm",
        )},  ${transferVariable.passengerCount} Yolcu`}
      </div>
    </Card>
  );
};

export default BRTransferCurrentItem;