"use client"

import Image from "next/image"
import { useState } from "react"
import { cn } from "@/lib/utils"

const DEFAULT_AVATAR_SRC = "/images/jessica-avatar.jpg"

type AssistantAvatarProps = {
  alt?: string
  className?: string
  sizeClassName?: string
  src?: string
}

export function AssistantAvatar({
  alt = "Jessica",
  className,
  sizeClassName = "h-10 w-10",
  src = DEFAULT_AVATAR_SRC,
}: AssistantAvatarProps) {
  const [hasError, setHasError] = useState(false)

  if (hasError) {
    return (
      <div
        aria-hidden="true"
        className={cn(
          "flex items-center justify-center overflow-hidden rounded-full border border-white/60 bg-gradient-to-br from-stone-200 via-amber-50 to-stone-300 font-semibold text-stone-700 shadow-sm",
          sizeClassName,
          className
        )}
      >
        J
      </div>
    )
  }

  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-full border border-white/60 bg-stone-100 shadow-sm",
        sizeClassName,
        className
      )}
    >
      <Image
        src={src}
        alt={alt}
        fill
        sizes="64px"
        className="object-cover"
        onError={() => setHasError(true)}
      />
    </div>
  )
}