import { LuArrowDown } from 'react-icons/lu';

import type { ScrollToBottomButtonProps } from '../types';

const TelegramScrollToBottomButton = ({
  visible,
  onClick,
  unread,
}: ScrollToBottomButtonProps) => (
  <button
    type="button"
    aria-hidden={!visible}
    onClick={onClick}
    className={`
            absolute right-3 bottom-3 z-10
            w-11 h-11 rounded-full
            bg-[var(--tg-bg)] border border-[var(--tg-divider)]
            shadow-md
            inline-flex items-center justify-center
            text-[var(--tg-text-secondary)]
            transition-all duration-200 tg-press
            ${
              visible
                ? 'opacity-100 translate-y-0 pointer-events-auto'
                : 'opacity-0 translate-y-2 pointer-events-none'
            }
          `}
  >
    <LuArrowDown size={20} />
    {unread > 0 && (
      <span
        className="absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5
                  rounded-full text-[11px] font-semibold
                  inline-flex items-center justify-center
                  bg-[var(--tg-accent)] text-white"
      >
        {unread > 99 ? '99+' : unread}
      </span>
    )}
  </button>
);

export default TelegramScrollToBottomButton;
