import { useConfigStore } from '@/stores/configStore';
import { CameraGridCell } from './CameraGridCell';

const STAGGER_MS = 200;

export function CameraGrid() {
  const cameras = useConfigStore((s) => s.cameras);
  const gridConfig = useConfigStore((s) => s.config?.grid);

  const count = cameras.length;
  const cols = gridConfig?.columns ?? (
    count <= 4 ? 2 :
    count <= 9 ? 3 :
    4
  );

  const rows = Math.ceil(count / cols);
  const gap = gridConfig?.gap ?? 4;

  return (
    <div
      className="h-full p-2"
      style={{
        display: 'grid',
        gridTemplateColumns: `repeat(${cols}, 1fr)`,
        gridTemplateRows: `repeat(${rows}, 1fr)`,
        gap: `${gap}px`,
      }}
    >
      {cameras.map((cam, i) => (
        <CameraGridCell key={cam.name} camera={cam} delayMs={i * STAGGER_MS} />
      ))}
    </div>
  );
}