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

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

export type CashbackMigrationComponentProps = {
  cashBack?: CashBack;
};

export default function CashbackMigrationComponent({
  cashBack,
}: CashbackMigrationComponentProps) {
  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">
            Get back Platform token credits
          </Typography>

          <Typography
            variant="lead"
            className="text-slate-600 text-xs font-normal leading-5"
          >
            ${cashBack?.totalAmount} worth of{" "}
            {CASHBACK_TOKEN?.[cashBack?.assetSymbol]?.label} will be credited to
            your Homnifi wallet.
          </Typography>
        </div>
      </div>
    </>
  );
}
