import Image from "next/image";
import './CastSection.css';

const CastSection = ({ cast }) => {
  return (
    <div className="cast-section">
      <h2>Cast</h2>
      {cast.length > 0 ? (
        <ul className="cast-list">
          {cast.map((profile) => (
            <li key={profile.id} className="cast-item">
              <div className="cast-image-container">
                <Image 
                  src={profile.image || `https://eu.ui-avatars.com/api/?name=${profile.personName}&size=250`} 
                  layout="fill"
                  objectFit="cover"
                  alt={`Profile picture of ${profile.personName}`} 
                  className="cast-image"
                />
              </div>
              <span className="cast-name">
                {profile.personName} {profile.name ? `as ${profile.name}` : ""}
              </span>
            </li>
          ))}
        </ul>
      ) : (
        <p>Cast not available</p>
      )}
    </div>
  );
};

export default CastSection;