/* eslint-disable @next/next/no-img-element */
import type { PropsWithChildren } from "react";

import Card from "@/components/ui/card/card";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { useLocale } from "@/hooks/useLocale";

export interface ReservationSummaryProps extends PropsWithChildren {}

interface ReservationSummaryTextProps extends PropsWithChildren {
  text: string;
}

interface ReservationSummaryImageProps {
  reservationSummaryImage: any;
}

interface ReservationSummaryTotalPriceProps {
  price: string;
}

const ReservationSummaryProvider = ({ children }: ReservationSummaryProps) => {
  return <Card className="flex flex-col gap-4 p-5">{children}</Card>;
};

const ReservationSummaryTitle = ({
  text,
  children,
}: ReservationSummaryTextProps) => {
  return (
    <div className="flex justify-between text-xl font-semibold">
      <p>{text}</p>
      {children}
    </div>
  );
};

const ReservationSummaryImage = ({
  reservationSummaryImage,
}: ReservationSummaryImageProps) => {
  return (
    <img
      className="mt-1"
      width={98}
      height={68}
      src={reservationSummaryImage}
      alt=""
    />
  );
};

const ReservationSummaryRoutes = (props: {
  origin?: string;
  destination?: string;
}) => {
  return (
    <div className="mt-4 flex shrink-0 flex-col md:max-w-[200px]">
      <div className="flex items-start gap-2">
        <div className="flex flex-col items-center justify-center pt-[6px]">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="9"
            height="8"
            viewBox="0 0 9 8"
            fill="none"
          >
            <circle cx="4.5" cy="4" r="4" fill="#98A2B3" />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1"
            height="19"
            viewBox="0 0 1 19"
            fill="none"
          >
            <path
              d="M0.5 18.5L0.499999 0.5"
              stroke="#98A2B3"
              stroke-dasharray="2 2"
            />
          </svg>
          <LIcon name="ChevronsDown" size={12} color="#98A2B3" />
        </div>

        <span className="text-sm text-gray-500">{props.origin}</span>
      </div>
      <div className="flex items-end gap-2">
        <div className="flex flex-col items-center justify-center pb-[5px] pl-px">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="1"
            height="19"
            viewBox="0 0 1 19"
            fill="none"
          >
            <path
              d="M0.5 18.5L0.499999 0.5"
              stroke="#98A2B3"
              stroke-dasharray="2 2"
            />
          </svg>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="9"
            height="8"
            viewBox="0 0 9 8"
            fill="none"
          >
            <circle cx="4.5" cy="4" r="4" fill="#98A2B3" />
          </svg>
        </div>
        <span className="line-clamp-2 text-ellipsis text-sm text-gray-500">
          {props.destination}
        </span>
      </div>
    </div>
  );
};

const ReservationSummaryPriceBox = ({
  price,
}: ReservationSummaryTotalPriceProps) => {
  const { t } = useLocale();
  return (
    <div className="flex items-center justify-between rounded-primary border bg-white p-3">
      <span className="text-sm text-gray-500">
        {`${t("Total")} ${t("Amount")}`}
      </span>
      <span className="text-xl font-semibold text-gray-800">{price}</span>
    </div>
  );
};

const ReservationSummarySeperator = () => {
  return <div className="w-full border-b border-gray-200" />;
};

export {
  ReservationSummaryImage,
  ReservationSummaryPriceBox,
  ReservationSummaryProvider,
  ReservationSummaryRoutes,
  ReservationSummarySeperator,
  ReservationSummaryTitle,
};