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

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

const WhatsappScrollToBottomButton = ({
  visible,
  onClick,
  unread,
}: ScrollToBottomButtonProps) => (
  <button
    type="button"
    aria-hidden={!visible}
    onClick={onClick}
    className={`
      absolute right-3 bottom-3 z-10
      w-12 h-12 rounded-full
      bg-[var(--tg-bg)] shadow-lg
      inline-flex items-center justify-center
      text-[var(--tg-accent)]
      transition-all duration-200 tg-press
      ring-1 ring-black/[0.06] dark:ring-white/[0.08]
      ${
        visible
          ? 'opacity-100 translate-y-0 pointer-events-auto'
          : 'opacity-0 translate-y-2 pointer-events-none'
      }
    `}
  >
    <LuArrowDown size={22} strokeWidth={2} />
    {unread > 0 && (
      <span
        className="absolute -top-0.5 -right-0.5 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 shadow-sm"
      >
        {unread > 99 ? '99+' : unread}
      </span>
    )}
  </button>
);

export default WhatsappScrollToBottomButton;
