import { Button } from "@/components/ui/button/button";
import { useLocale } from "@/hooks/useLocale";

export interface UsageMasterpassBannerProps {
  phoneNumber: string;
  onOk: () => void;
  onCancel: () => void;
}

const UsageMasterpassBanner = (props: UsageMasterpassBannerProps) => {
  const { t } = useLocale();
  return (
    <div className="relative">
      <div
        className="flex items-center justify-between rounded-primary bg-primary-500 p-2 text-xs text-white before:absolute before:bottom-full before:left-[4%] 
      before:border-8 before:border-transparent before:border-b-primary-500 lg:max-w-full lg:before:inline-block lg:before:content-['']"
      >
        <span className="font-medium">
          {t(
            "Would you like to use your Masterpass cards registered to {{phone}}?",
            { phone: props.phoneNumber },
          )}
        </span>
        <div className="flex gap-4">
          <Button className="!h-[15px] !p-0" onClick={() => props.onOk()}>
            {t("Yes")}
          </Button>
          <Button
            onClick={() => props.onCancel()}
            className="!h-[15px] !p-0  text-gray-400"
          >
            {t("No")}
          </Button>
        </div>
      </div>
    </div>
  );
};

export { UsageMasterpassBanner };