"use client";
import React from "react";

type Props = {
  height?: number | string; // ex) 224 or '14rem'
  className?: string;
};

// Figma 선택 요소(Container_Event)를 그대로 옮긴 플레이스홀더형 배너
export function SelectedBanner({ height = 122, className }: Props) {
  return (
    <section
      className={`relative w-full overflow-hidden rounded-[12px] bg-[#D9D9D9] ${className ?? ""}`}
      style={{ height }}
      aria-label="banner"
    >
      <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-[6px]" style={{ bottom: 12 }}>
        <span className="block h-[4px] w-[18px] rounded-full bg-[#F94B37]" aria-hidden />
        {Array.from({ length: 12 }).map((_, i) => (
          <span key={i} className="block h-[6px] w-[6px] rounded-full bg-[#B9B9B9]" aria-hidden />
        ))}
      </div>
    </section>
  );
}

export default SelectedBanner;