// Red overlay rendered on audio tracks over each detected silence window.
// Double-click to remove a single segment.

'use client';

import { formatTimeShort } from '@/lib/media';

interface Props {
  seg: { id: string; start: number; end: number };
  zoom: number;
  onRemove: () => void;
}

export function SilenceBlock({ seg, zoom, onRemove }: Props) {
  const left = seg.start * zoom;
  const width = Math.max(2, (seg.end - seg.start) * zoom);
  return (
    <div
      className="absolute top-1 bottom-1 rounded border border-capcut-red bg-capcut-red/30 group cursor-pointer"
      style={{ left, width }}
      onDoubleClick={onRemove}
      title={`ช่วงเงียบ ${formatTimeShort(seg.start)} - ${formatTimeShort(seg.end)} (ดับเบิลคลิกเพื่อลบ)`}
    >
      <div className="absolute inset-0 flex items-center justify-center text-[9px] text-white font-medium opacity-0 group-hover:opacity-100 pointer-events-none">
        เงียบ
      </div>
    </div>
  );
}