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

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

const InstagramScrollToBottomButton = ({
  visible,
  onClick,
  unread,
}: ScrollToBottomButtonProps) => (
  <button
    type="button"
    aria-hidden={!visible}
    onClick={onClick}
    className={`
      absolute right-4 bottom-4 z-10
      w-12 h-12 rounded-full
      bg-[var(--tg-bg)] text-[var(--tg-accent)]
      shadow-[0_2px_12px_rgba(0,0,0,0.15)] dark:shadow-[0_2px_16px_rgba(0,0,0,0.5)]
      ring-2 ring-[var(--tg-accent)]/25
      inline-flex items-center justify-center
      transition-all duration-200 tg-press
      ${
        visible
          ? 'opacity-100 scale-100 pointer-events-auto'
          : 'opacity-0 scale-90 pointer-events-none'
      }
    `}
  >
    <LuArrowDown size={22} strokeWidth={2.5} />
    {unread > 0 && (
      <span
        className="absolute -top-1 -right-1 min-w-[20px] h-5 px-1
          rounded-full text-[10px] font-bold
          inline-flex items-center justify-center
          bg-[var(--tg-danger)] text-white"
      >
        {unread > 99 ? '99+' : unread}
      </span>
    )}
  </button>
);

export default InstagramScrollToBottomButton;
