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

const InstagramChannelHeaderCenter = ({
  title,
  status,
  statusTone,
  avatarId,
  avatarSize = 40,
}: ChannelHeaderCenterProps) => (
  <div className="flex items-center gap-3 min-w-0 pl-0.5">
    <Avatar id={avatarId} size={avatarSize} />
    <div className="min-w-0 flex flex-col justify-center">
      <div className="text-[16px] font-semibold leading-tight truncate text-[var(--tg-text-primary)]">
        {title}
      </div>
      <div
        className={`text-[13px] leading-snug truncate mt-0.5 font-normal ${
          statusTone === 'muted'
            ? 'text-[var(--tg-text-secondary)]'
            : 'text-[var(--tg-accent)]'
        }`}
      >
        {status}
      </div>
    </div>
  </div>
);

export default InstagramChannelHeaderCenter;
