import Image from "next/image";

import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { cn } from "@/libs/utils";

export interface FlightInformationModalProps {
  brandName: string;
  flightCode: string;
  infoText?: string;
  marketingAirlineCode: string;
  departureTime: string;
  arrivalTime: string;
  destination: string;
  origin: string;
  flightTime: string;
  lastSegment?: boolean;
  waitingTime?: string | null;
}

const FlightInformationModal = ({
  brandName,
  flightCode,
  infoText,
  origin,
  destination,
  departureTime,
  arrivalTime,
  marketingAirlineCode,
  flightTime,
  lastSegment,
  waitingTime,
}: FlightInformationModalProps) => {
  return (
    <div className="flex flex-col gap-4">
      {infoText && (
        <div className="flex items-center gap-1 text-xs text-gray-500">
          <LIcon name="Info" className="w-4" />
          {infoText}
        </div>
      )}

      <div className="flex items-center gap-2">
        <Image
          width={24}
          height={24}
          className="size-[24px]"
          src={`https://concorecdn.jollytur.com/concore/media/site/assets/img/theme/${marketingAirlineCode}-42x42.gif?v1040`}
          alt=""
        />
        <span className="text-sm font-semibold text-gray-800">{brandName}</span>
        <span className="text-xs text-gray-500">{flightCode}</span>
      </div>
      <div>
        <div className="flex items-center gap-2 text-sm font-normal text-gray-800">
          <LIcon name="Plane" className="w-4 text-gray-500" />
          <div className="flex flex-col text-xs">
            <span>{departureTime}</span>
            <span>{origin}</span>
          </div>
        </div>
        <div className="mt-2 flex h-[38px] items-center text-gray-500">
          <span className="ml-[-4%] rotate-90 text-gray-500">-------</span>
          <span className="text-xs font-normal">{flightTime}</span>
        </div>
        <div className="flex items-center gap-2 text-sm font-normal text-gray-800">
          <span
            className={cn(
              "ml-[-2px] text-4xl",
              lastSegment ? "text-success-500" : "text-gray-500",
            )}
          >
            &#8226;
          </span>
          <div className="flex flex-col text-xs">
            <span>{arrivalTime}</span>
            <span>{destination}</span>
          </div>
        </div>
      </div>

      {waitingTime && (
        <div className="flex items-center gap-2">
          <LIcon name="Clock4" className="w-4 text-gray-500" />
          <div className="flex flex-1 items-center justify-center rounded-primary bg-warning-50 py-2">
            <span className="text-xs font-normal text-gray-800">
              Aktarma: {waitingTime} bekleme süresi
            </span>
          </div>
        </div>
      )}
    </div>
  );
};

export default FlightInformationModal;