import { SCENES } from './scenes';

interface Props {
  currentScene: string;
  onSelect: (id: string) => void;
}

export default function BackgroundScene({ currentScene, onSelect }: Props) {
  return (
    <div className="p-4">
      <h3 className="text-sm font-bold text-kira-plum mb-3 flex items-center gap-2">
        <span>🎨</span> Scene
      </h3>
      <div className="flex flex-wrap gap-2">
        {SCENES.map((s) => (
          <button
            key={s.id}
            onClick={() => onSelect(s.id)}
            className={`
              flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-sm font-medium transition-all
              ${currentScene === s.id
                ? 'bg-kira-pink text-white shadow-md scale-105'
                : 'bg-white/50 text-kira-plum/70 hover:bg-kira-glow hover:scale-102'
              }
            `}
            title={s.name}
          >
            <span>{s.icon}</span>
            <span className="hidden sm:inline">{s.name}</span>
          </button>
        ))}
      </div>
    </div>
  );
}
