// components/Chat/Avatar.tsx
'use client';

import React from 'react';
import { theme, fontFamily } from './theme';
import { avatarColor, initials } from './chatHelpers';

type Status = 'online' | 'away' | 'offline' | 'busy';

interface Props {
  name:    string;
  size?:   number;
  status?: Status | null;
  imageUrl?: string;
  ring?:   boolean;
}

const STATUS_COLORS: Record<Status, string> = {
  online:  theme.success,
  away:    theme.warning,
  busy:    theme.danger,
  offline: theme.gray[400],
};

export default function Avatar({ name, size = 36, status, imageUrl, ring }: Props) {
  const color = avatarColor(name);
  const ini = initials(name);
  const dotSize = Math.max(8, size * 0.28);

  return (
    <div style={{ position: 'relative', flexShrink: 0, width: size, height: size }}>
      <div style={{
        width: size, height: size,
        borderRadius: '50%',
        background: imageUrl ? '#000' : `linear-gradient(135deg, ${color}ee 0%, ${color} 100%)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff',
        fontSize: size * 0.38,
        fontWeight: 600,
        fontFamily,
        letterSpacing: '-0.02em',
        overflow: 'hidden',
        boxShadow: ring ? `0 0 0 2px #fff, 0 0 0 4px ${theme.brand[500]}` : 'none',
        transition: 'box-shadow 0.2s ease',
      }}>
        {imageUrl ? (
          <img src={imageUrl} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        ) : ini}
      </div>
      {status && (
        <div style={{
          position: 'absolute',
          bottom: -1, right: -1,
          width: dotSize, height: dotSize,
          borderRadius: '50%',
          backgroundColor: STATUS_COLORS[status],
          border: '2px solid #fff',
          boxShadow: '0 0 0 1px rgba(0,0,0,0.05)',
        }} />
      )}
    </div>
  );
}