import { Typography } from "@material-tailwind/react";

import casBackIcon from "../../public/img/cashback-Icon.png";
import { SMLYK } from "../constants/app";
import { CashBack } from "../types/shoppingCart";
import CustomNextImage from "./CustomNextImage";

export type CashbackComponentProps = {
  cashBack?: CashBack;
  messageIfNoCashback?: boolean;
};

export default function CashbackComponent({
  cashBack,
  messageIfNoCashback = false,
}: CashbackComponentProps) {
  return (
    <>
      <div className="cashback-bg flex items-center gap-4 mt-5">
        <CustomNextImage
          src={casBackIcon.src}
          alt={"cashback"}
          width={50}
          height={50}
        />
        <div>
          <Typography variant="h6" className="text-black-500">
            Cashback
          </Typography>

          <Typography
            variant="lead"
            className="text-slate-600 text-xs font-normal leading-5"
          >
            {!!messageIfNoCashback ? (
              <>No cashback applicable on Pickup delivery mode</>
            ) : (
              <>
                Cashback of ${cashBack?.totalAmount} worth of {SMLYK.label} will
                be credited to your Homnifi wallet
              </>
            )}
          </Typography>
        </div>
      </div>
    </>
  );
}
