import React from "react";
import { FileIconSvg } from "../assets/svg/FileIconSvg";
import { RightArrowSvg } from "../assets/svg/RightArrowSvg";
import { SparkleStarsSvg } from "../assets/svg/SparkleStarsSvg";
import { UploadIconSvg } from "../assets/svg/UploadIconSvg";

interface EwayBillModalProps {
  onSelectEnterEwayBill?: () => void;
  onSelectNoEwayBill?: () => void;
  is_under_verification:boolean
}

export const EwayBillModal: React.FC<EwayBillModalProps> = ({
  onSelectEnterEwayBill,
  onSelectNoEwayBill,
  is_under_verification
}) => {
  return (
    <div
      className="fr-py-4"
      style={{
        boxShadow: "0px -4px 20px rgba(0,0,0,0.1)",
      }}
    >
      {/* TITLE */}
      <p className="fr-font-semibold fr-text-base fr-text-lg fr-px-4 fr-mb-2">
        Select LR approval type
      </p>

      {/* OPTION 1 */}
      <div
        onClick={onSelectEnterEwayBill}
        className="fr-flex fr-justify-between fr-p-4 fr-border-b fr-cursor-pointer"
        style={{ borderColor: "#E5E7EB" }}
      >
        <div className="fr-flex fr-items-start fr-gap-3">
          <div style={{ position: "relative", width: "30px", top: "10px" }}>
            <div
              style={{
                position: "absolute",
                top: "-14px",
                left: "14px",
                pointerEvents: "none",
              }}
            >
              <SparkleStarsSvg />
            </div>
            <FileIconSvg />
          </div>

          <div>
            <p className="fr-font-semibold fr-text-lg">Enter E-way bill</p>
            <p className="f fr-text-medium">Faster approval</p>
          </div>
        </div>

        <div className="fr-flex fr-items-center fr-gap-2">
          <span
            className="fr-text-[10px] fr-px-2 fr-py-1 fr-rounded-md"
            style={{ backgroundColor: "#E0F0FF", color: "#0077E6" }}
          >
            Recommended
          </span>
          <RightArrowSvg />
        </div>
      </div>

      {/* OPTION 2 */}
      <div
        onClick={onSelectNoEwayBill}
        className="fr-flex fr-justify-between fr-p-4 fr-border-b fr-cursor-pointer"
        style={{ borderColor: "#E5E7EB" }}
      >
        <div
          className="fr-flex fr-items-start fr-gap-3"
          style={{ top: "10px" }}
        >
          <div style={{ position: "relative", width: "30px", top: "5px" }}>
            <UploadIconSvg />
          </div>
          <div>
            <p className="fr-font-semibold fr-text-lg">
              {is_under_verification ? "LR under Verification" : "I don't have an E-way bill" }
            </p>
            <p className="fr-text-medium fr-w-full" style={{backgroundColor:is_under_verification ? "#e6b60bff" : "",color:is_under_verification ? "black": ""}}>
              
                            {is_under_verification ? "Verification takes up-to 30 minutes" : "Upload LR, verified within 30 mins" }

            </p>
          </div>
        </div>

        <RightArrowSvg />
      </div>
    </div>
  );
};