import styles from './buttons.module.scss';
import Spinner from '@/public/assets/animated/90-ring.svg';
import TelegramIcon from '@/public/assets/images/telegram.svg?url';
import Image from 'next/image';
import type { ButtonHTMLAttributes } from 'react';

type Props = ButtonHTMLAttributes<HTMLButtonElement>;

export function ButtonLogin(props: Props) {
  return (
    <button className={styles['button-submit']} type="submit" {...props}>
      Войти
    </button>
  );
}

export function ButtonLoading(props: Props) {
  return (
    <button disabled type="button" className={styles['button-submit']} {...props}>
      <div className={styles['loading-wrapper']}>
        <Spinner alt="spinner" className={styles['spinner-icon']} />
        Подождите...
      </div>
    </button>
  );
}

export function ButtonTelegram(props: Props) {
  return (
    <button type="submit" className={styles['button-telegram']} {...props}>
      <Image
        className={styles['button-telegram-icon']}
        src={TelegramIcon}
        width={24}
        height={22}
        alt="Telegram icon"
      />
      {props.children}
    </button>
  );
}

export function ButtonTelegramLogin(props: Props) {
  return (
    <button disabled type="submit" className={styles['button-telegram']} {...props}>
      <Image
        className={styles['button-telegram-icon']}
        src={TelegramIcon}
        width={24}
        height={22}
        alt="Telegram icon"
      />
      Ожидаем подтверждения...
    </button>
  );
}