import React from 'react'
import { cn } from '../lib/utils'
import { User } from 'lucide-react'

interface ProfileImageProps {
  uri?: string | null
  size?: number
  className?: string
}

export function ProfileImage({ uri, size = 80, className }: ProfileImageProps) {
  if (uri) {
    return (
      <img
        src={uri}
        alt="Profile"
        className={cn('rounded-full object-cover', className)}
        style={{ width: size, height: size }}
      />
    )
  }

  return (
    <div
      className={cn(
        'flex items-center justify-center rounded-full bg-gray-200',
        className
      )}
      style={{ width: size, height: size }}
    >
      <User className="h-1/2 w-1/2 text-gray-400" />
    </div>
  )
}
