'use client';

import { cn } from '@/lib/utils';

interface KeyframeMarkerProps {
  bar: number;
  pixelsPerBar: number;
  color?: string;
  selected?: boolean;
  onSelect?: () => void;
  onDelete?: () => void;
  className?: string;
}

export function KeyframeMarker({
  bar,
  pixelsPerBar,
  color = 'bg-primary',
  selected = false,
  onSelect,
  onDelete,
  className,
}: KeyframeMarkerProps) {
  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onSelect?.();
  };

  const handleContextMenu = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    onDelete?.();
  };

  return (
    <div
      className={cn(
        'absolute top-1/2 -translate-y-1/2 cursor-pointer',
        'transition-transform hover:scale-125',
        selected && 'scale-125',
        className
      )}
      style={{ left: bar * pixelsPerBar }}
      onClick={handleClick}
      onContextMenu={handleContextMenu}
    >
      <div
        className={cn(
          'w-3 h-3 rotate-45 border-2',
          color,
          selected ? 'border-white shadow-lg' : 'border-transparent'
        )}
      />
    </div>
  );
}