export function ScenarioMapOverlay() {
  return (
    <div className="flex-1 flex items-center justify-center flex-col gap-4">
      <div
        className="flex items-center justify-center rounded-md border border-stroke text-fg-disabled text-title-4 bg-bg-elevated"
        style={{
          width: '80%',
          maxWidth: '600px',
          height: '300px',
        }}
      >
        [시나리오별 확산범위 오버레이 지도]
      </div>
      <div className="flex gap-4">
        {[
          { label: 'T+0h SW방향', color: 'var(--color-danger)' },
          { label: 'T+1h SE 전환', color: 'var(--color-warning)' },
          { label: 'T+3h S방향', color: 'var(--color-caution)' },
          { label: 'T+6h 차단 후', color: 'var(--color-success)' },
        ].map((item, i) => (
          <div key={i} className="flex items-center gap-1.5">
            <div className="w-3 h-3 rounded-full opacity-50" style={{ background: item.color }} />
            <span className="text-label-2 text-fg-sub">{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
