type ActionMediaProps = {
  action: {
    id: string;
    title: string;
    media?: {
      type: "image" | "video";
      url: string;
      poster?: string;
    };
  };
  index: number;
};

export default function ActionMedia({
  action,
  index,
}: ActionMediaProps) {
  const media = action.media;

  if (media?.url && media.type === "video") {
    return (
      <div className="action-card-image action-card-video">
        <video
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          poster={media.poster || undefined}
          aria-label={action.title}
        >
          <source src={media.url} />
        </video>

        <span className="action-media-number">
          {String(index + 1).padStart(2, "0")}
        </span>

        <span className="action-media-label">
          {action.id === "key"
            ? "LEARN"
            : action.id === "event"
              ? "CONNECT"
              : "CONTRIBUTE"}
        </span>
      </div>
    );
  }

  if (media?.url && media.type === "image") {
    return (
      <div
        className="action-card-image"
        style={{
          backgroundImage: `url("${media.url}")`,
        }}
      >
        <span className="action-media-number">
          {String(index + 1).padStart(2, "0")}
        </span>
      </div>
    );
  }

  return (
    <div
      className={`action-card-image action-card-image-empty action-card-image-${action.id}`}
    >
      <span className="action-media-number">
        {String(index + 1).padStart(2, "0")}
      </span>

      <span className="action-media-label">
        {action.id === "key"
          ? "LEARN"
          : action.id === "event"
            ? "CONNECT"
            : "CONTRIBUTE"}
      </span>
    </div>
  );
}