import Image from "next/image";

type CreatorPhotoCircleProps = {
  alt: string;
  className?: string;
  imageUrl?: string | null;
  placeholder: string;
  skills: string[];
};

export function CreatorPhotoCircle({
  alt,
  className = "",
  imageUrl,
  placeholder,
  skills
}: CreatorPhotoCircleProps) {
  return (
    <div className={`creator-photo-card creator-photo-card--circle ${className}`.trim()}>
      <div className="creator-photo creator-photo--circle">
        {imageUrl ? (
          <Image alt={alt} fill sizes="(max-width: 900px) 100vw, 420px" src={imageUrl} unoptimized />
        ) : (
          <div className="creator-photo-placeholder">{placeholder}</div>
        )}
      </div>
      <div className="creator-skill-cloud" aria-label="Skills">
        {skills.map((skill) => (
          <span className="creator-skill" key={skill}>
            {skill}
          </span>
        ))}
      </div>
    </div>
  );
}