'use client';

import React from 'react';
import type { TileScene } from '@/src/config/scenes';

type SceneSelectorProps = {
  scenes: TileScene[];
  selectedSceneId: string | null;
  onSelect: (sceneId: string) => void;
};

export default function SceneSelector({ scenes, selectedSceneId, onSelect }: SceneSelectorProps) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {scenes.map((scene) => {
        const active = scene.id === selectedSceneId;
        return (
          <button
            key={scene.id}
            type="button"
            onClick={() => onSelect(scene.id)}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              padding: 10,
              borderRadius: 10,
              border: active ? '2px solid #2563eb' : '1px solid #d1d5db',
              background: '#fff',
              cursor: 'pointer',
              textAlign: 'left',
            }}
          >
            <div
              style={{
                width: 72,
                height: 48,
                borderRadius: 8,
                overflow: 'hidden',
                border: '1px solid #e5e7eb',
                backgroundColor: '#f3f4f6',
                flexShrink: 0,
              }}
            >
              <img
                src={scene.imageUrl}
                alt={scene.label}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              />
            </div>
            <div>
              <div style={{ fontWeight: 600, color: '#111827' }}>{scene.label}</div>
              <div style={{ fontSize: 12, color: '#6b7280' }}>
                {scene.cols} × {scene.rows} Fliesen
              </div>
            </div>
          </button>
        );
      })}
    </div>
  );
}