import Card from "@/components/ui/card/card";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import type { PassengerInformations } from "@/services/eva-display/demand/demand-service.types";

export interface BookingRequestSuccessProps {
  passengerInformations?: PassengerInformations[];
}

const BookingRequestSuccess = ({
  passengerInformations,
}: BookingRequestSuccessProps) => {
  return (
    <Card>
      <div className="flex items-center gap-3 text-2xl text-success-500">
        <LIcon name="CheckCircle" className="gap-6" />
        <h2 className="font-semibold">Rezervasyon talebiniz gönderildi.</h2>
      </div>
      <div className="mt-6 flex items-stretch gap-4">
        <div className="flex shrink-0 flex-col items-center justify-between pb-9">
          <div className="flex size-6 items-center justify-center rounded-full bg-primary-50 text-sm text-primary-500">
            1
          </div>
          <div className="w-px grow bg-primary-500" />
          <div className="flex size-6 items-center justify-center rounded-full bg-primary-50 text-sm text-primary-500">
            2
          </div>
          <div className="w-px grow bg-gray-100" />
          <div className="flex size-6 items-center justify-center rounded-full bg-gray-100 text-sm text-gray-400">
            3
          </div>
        </div>
        <div className="flex flex-col gap-6">
          <div>
            <p className="font-medium text-primary-500">Talep Oluşturuldu</p>
            <p className="text-sm">Rezervasyon talebiniz oluşturuldu.</p>
          </div>
          <div>
            <p className="font-medium text-primary-500">Onay Bekleniyor</p>
            <p className="text-sm">
              Rezervasyonunuz yetkili kişilere kontrol edip onaylaması için
              gönderildi.
            </p>
          </div>
          <div>
            <p className="font-medium text-gray-400">
              Rezervasyon oluşturuldu.
            </p>
            <p className="text-sm">
              Rezervasyon numaranız talebiniz onaylandıktan sonra rezervasyon
              kişilerine e-posta olarak iletilecektir.
            </p>
          </div>
        </div>
      </div>
      <div className="mt-6 grid grid-cols-1 gap-4 pl-10 md:grid-cols-2">
        {passengerInformations &&
          passengerInformations.map((passengerInformation, index) => (
            <div
              className="flex min-h-[80px] flex-col justify-center rounded-primary border border-gray-200 bg-gray-50 p-4"
              key={passengerInformation.Id}
            >
              <div className="flex items-center gap-2 text-sm">
                <span className="text-gray-500">{index + 1}.kişi</span>
                <span className="font-medium">
                  {`${passengerInformation.Name} ${passengerInformation.Surname}`}
                </span>
              </div>
              <div className="mt-2">
                <span className="text-sm">{passengerInformation.Email}</span>
              </div>
            </div>
          ))}
      </div>
    </Card>
  );
};

export { BookingRequestSuccess };