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

const TelegramChannelHeaderCenter = ({
  title,
  status,
  statusTone,
  avatarId,
  avatarSize = 40,
}: ChannelHeaderCenterProps) => (
  <div className="flex items-center gap-3 min-w-0 pl-1">
    <Avatar id={avatarId} size={avatarSize} />
    <div className="min-w-0">
      <div className="font-semibold text-[15px] leading-5 truncate text-[var(--tg-text-primary)]">
        {title}
      </div>
      <div
        className={`text-[12px] leading-4 truncate ${
          statusTone === 'muted'
            ? 'text-[var(--tg-text-secondary)]'
            : 'text-[var(--tg-accent)]'
        }`}
      >
        {status}
      </div>
    </div>
  </div>
);

export default TelegramChannelHeaderCenter;
