interface WinLine {
  start:{row:number,col:number};
  end:{row:number,col:number};
}
function Board({board,onCell,highlight,winLine,theme}:{board:string[][],onCell:(r:number,c:number)=>void,highlight:any,winLine:WinLine|null,theme:string}){
  const cells = board.map((row,r)=>
    row.map((c,cidx)=><Cell key={`${r}-${cidx}`} value={c} highlight={highlight&&highlight.row===r&&highlight.col===cidx} onClick={()=>onCell(r,cidx)}/>)
  );
  let line=null;
  if(winLine){
    const ext=0.4;
    const startCenter={x:winLine.start.col+0.5,y:winLine.start.row+0.5};
    const endCenter={x:winLine.end.col+0.5,y:winLine.end.row+0.5};
    const dx=endCenter.x-startCenter.x;
    const dy=endCenter.y-startCenter.y;
    const len=Math.sqrt(dx*dx+dy*dy);
    const nx=dx/len;const ny=dy/len;
    const a={x:startCenter.x-nx*ext,y:startCenter.y-ny*ext};
    const b={x:endCenter.x+nx*ext,y:endCenter.y+ny*ext};
    const color='#333';
    line=<svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 3 3" preserveAspectRatio="none">
      <line x1={a.x} y1={a.y} x2={b.x} y2={b.y} stroke={color} strokeWidth="0.1" strokeLinecap="round"/>
    </svg>;
  }
  return <div className="relative board">{cells}{line}</div>;
}