import{r as S,C as i,j as B}from"./index-8qL2GjUN.js";const O=4,H=["G","D","A","E"];function q({tabData:f,currentTimeRef:P,width:s,height:c}){const M=S.useRef(null),d=S.useRef(null),v=S.useCallback(()=>{const l=M.current;if(!l||!f)return;const t=l.getContext("2d"),a=window.devicePixelRatio||1;(l.width!==s*a||l.height!==c*a)&&(l.width=s*a,l.height=c*a,l.style.width=`${s}px`,l.style.height=`${c}px`,t.scale(a,a));const A=P?.current??0,o=f.strings||4,r=50,w=30,x=40,k=20,E=c-r-w,u=E/(o-1),j=s-x-k,T=x+j*.2,C=j*.8/O;t.fillStyle=i.tabBg,t.fillRect(0,0,s,c),t.font="13px Inter, monospace",t.textAlign="right",t.textBaseline="middle";for(let e=0;e<o;e++){const n=r+e*u;t.fillStyle=i.textMuted;const g=o-1-e;t.fillText(H[g]||"",x-10,n)}t.strokeStyle=i.tabString,t.lineWidth=1;for(let e=0;e<o;e++){const n=r+e*u;t.beginPath(),t.moveTo(x,n),t.lineTo(s-k,n),t.stroke()}const F=f.events||[];t.textAlign="center",t.textBaseline="middle",t.font="bold 14px Inter, monospace";for(const e of F){const n=T+(e.time-A)*C;if(n<x-30||n>s+30)continue;const g=e.time<=A,I=g&&e.time+e.duration>A;for(let m=0;m<o;m++){const p=e.frets[m];if(p==null)continue;const L=o-1-m,R=r+L*u,W=t.measureText(String(p)).width,b=Math.max(W+8,18),y=18;I&&(t.fillStyle="rgba(139, 92, 246, 0.3)",t.beginPath(),t.roundRect(n-b/2,R-y/2,b,y,4),t.fill()),t.fillStyle=i.tabBg,t.fillRect(n-b/2,R-y/2,b,y),t.fillStyle=g?i.tabFretPlayed:i.tabFret,t.fillText(String(p),n,R)}}t.strokeStyle=i.tabProgressLine,t.lineWidth=2,t.shadowColor="rgba(139, 92, 246, 0.5)",t.shadowBlur=8,t.beginPath(),t.moveTo(T,r-10),t.lineTo(T,r+(o-1)*u+10),t.stroke(),t.shadowBlur=0,t.fillStyle=i.textMuted,t.font="bold 16px Inter, sans-serif",t.textAlign="center",t.textBaseline="middle";const h=r+E/2;t.fillText("T",15,h-12),t.fillText("A",15,h),t.fillText("B",15,h+12),d.current=requestAnimationFrame(v)},[f,P,s,c]);return S.useEffect(()=>(d.current=requestAnimationFrame(v),()=>{d.current&&cancelAnimationFrame(d.current)}),[v]),f?B.jsx("canvas",{ref:M,style:{display:"block",width:"100%",height:"100%"}}):B.jsx("div",{className:"tab-empty",children:B.jsx("p",{children:"No bass tab data available."})})}export{q as default};