'use client';

type EstadoPC = 'libre' | 'ocupada' | 'fallo';

const colores: Record<EstadoPC, string> = {
  libre: '#22c55e',    // verde
  ocupada: '#ef4444',  // rojo
  fallo: '#facc15',    // amarillo
};

const pcs = [
  {
    id: 'PC-01',
    x: 120,
    y: 180,
    width: 40,
    height: 40,
    estado: 'libre' as EstadoPC,
  },
  {
    id: 'PC-02',
    x: 170,
    y: 180,
    width: 40,
    height: 40,
    estado: 'ocupada' as EstadoPC,
  },
  {
    id: 'PC-03',
    x: 220,
    y: 180,
    width: 40,
    height: 40,
    estado: 'fallo' as EstadoPC,
  },
];

export default function DSC() {
  return (
    <svg viewBox="0 0 1500 900" width="100%" height="auto">

      {/* FONDO */}
      <image
        href="/plano.svg"
        width="100%"
        height="100%"
        preserveAspectRatio="xMidYMid meet"
        pointerEvents="none"
      />

      {/* CAPA INTERACTIVA */}
      <g>
        {pcs.map(pc => (
          <g key={pc.id}>
            {/* CUADRO */}
            <rect
              x={pc.x}
              y={pc.y}
              width={pc.width}
              height={pc.height}
              fill={colores[pc.estado]}
              stroke="#bb4242"
              strokeWidth={1}
              rx={4}
              style={{ cursor: 'pointer' }}
              onClick={() => console.log(pc.id)}
            />

            {/* NÚMERO */}
            <text
              x={pc.x + pc.width / 2}
              y={pc.y + pc.height / 2 + 5}
              textAnchor="middle"
              fontSize={12}
              fill="#000"
              pointerEvents="none"
            >
              {pc.id.replace('PC-', '')}
            </text>
          </g>
        ))}
      </g>

    </svg>
  );
}
