import { useDesignStore } from '../store/designStore';
import BeadSlotView from './BeadSlotView';

const CANVAS_SIZE = 360;
const SLOT_SIZE = 32;

function JewelryCanvas() {
  const slots = useDesignStore((s) => s.slots);
  const zoom = useDesignStore((s) => s.zoom);

  const center = CANVAS_SIZE / 2;

  return (
    <div
      className="relative mx-auto"
      style={{
        width: CANVAS_SIZE,
        height: CANVAS_SIZE,
        transform: `scale(${zoom})`,
        transformOrigin: 'center center',
      }}
    >
      {slots.map((slot) => (
        <BeadSlotView
          key={slot.index}
          slot={{
            ...slot,
            position: {
              ...slot.position,
              x: center + slot.position.x,
              y: center + slot.position.y,
            },
          }}
          slotSize={SLOT_SIZE}
        />
      ))}
    </div>
  );
}

export default JewelryCanvas;
