import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";

interface IYesNoButtonProps {
  onClick: (answer: "yes" | "no") => void;
}

function YesNoButtons({ onClick }: IYesNoButtonProps) {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  return (
    <div className={styles.container}>
      <div className={styles["button-container"]}>
        <button
          className={styles.button}
          type="button"
          onClick={() => onClick("no")}
        >
          <span className={styles.label}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              role="img"
              className={styles.icon}
              fill="var(--error)"
            >
              <title>cross</title>
              <path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z"></path>
            </svg>
            <span className={styles.text}>{translate("no")}</span>
          </span>
        </button>
      </div>
      <div className={styles["button-container"]}>
        <button
          className={styles.button}
          type="button"
          onClick={() => onClick("yes")}
        >
          <span className={styles.label}>
            <svg
              width="32"
              height="32"
              viewBox="0 0 32 32"
              xmlns="http://www.w3.org/2000/svg"
              role="img"
              className={styles.icon}
              fill="var(--success)"
            >
              <title>Check</title>
              <path d="M13.8193 20.2573L26.0753 8L27.962 9.88533L13.8193 24.028L5.33398 15.5427L7.21932 13.6573L13.8193 20.2573Z"></path>
            </svg>
            <span className={styles.text}>{translate("yes")}</span>
          </span>
        </button>
      </div>
    </div>
  );
}

export default YesNoButtons;
