import { IoCheckmarkDoneSharp } from 'react-icons/io5';

import Avatar from '../../ui/Avatar';
import Badge from '../../ui/Badge';
import type { DialogRowPresenterProps } from '../types';

const TelegramDialogRow = ({
  avatarId,
  title,
  preview,
  timeLabel,
  selected,
  closed,
  switchBlocked,
  onClick,
  showReadCheck,
  unread,
}: DialogRowPresenterProps) => (
  <button
    type="button"
    disabled={switchBlocked}
    onClick={onClick}
    className={`
        relative w-full flex items-center gap-3 px-3 py-2 rounded-xl
        text-left tg-press transition-colors duration-150
        ${
          selected
            ? 'bg-[var(--tg-bg-selected)] text-[var(--tg-bg-selected-text)]'
            : 'hover:bg-[var(--tg-bg-secondary)]'
        }
        ${closed && !selected ? 'opacity-60' : ''}
        ${switchBlocked ? 'opacity-50 cursor-not-allowed' : ''}
      `}
  >
    <Avatar id={avatarId} size={52} />

    <div className="flex-1 min-w-0">
      <div className="flex items-center gap-2 mb-0.5">
        <div
          className={`flex-1 min-w-0 truncate font-semibold text-[15px] ${
            selected ? 'text-white' : 'text-[var(--tg-text-primary)]'
          }`}
        >
          {title}
        </div>
        <div
          className={`shrink-0 text-[12px] ${
            selected ? 'text-white/80' : 'text-[var(--tg-text-secondary)]'
          }`}
        >
          {timeLabel}
        </div>
      </div>
      <div className="flex items-center gap-2">
        {showReadCheck && (
          <IoCheckmarkDoneSharp
            size={16}
            className={selected ? 'text-white' : 'text-[var(--tg-accent)]'}
          />
        )}
        <div
          className={`flex-1 min-w-0 truncate text-[14px] ${
            selected ? 'text-white/80' : 'text-[var(--tg-text-secondary)]'
          }`}
        >
          {preview}
        </div>
        {unread > 0 && !selected && <Badge variant="accent">{unread}</Badge>}
        {unread > 0 && selected && (
          <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-white text-[var(--tg-bg-selected)]">
            {unread}
          </span>
        )}
      </div>
    </div>
  </button>
);

export default TelegramDialogRow;
