import { cn } from '@/lib/utils';
import { Plus } from 'lucide-react';

interface InlineReviewGutterCellProps {
  lineNumber: number | null;
  type: 'add' | 'remove' | 'context' | 'header' | null;
  hasComments: boolean;
  canComment: boolean;
  onClick?: () => void;
}

export function InlineReviewGutterCell({
  lineNumber,
  type,
  hasComments,
  canComment,
  onClick,
}: InlineReviewGutterCellProps) {
  return (
    <div
      className={cn(
        'relative flex items-center justify-end pr-1 min-w-[40px] h-5 text-[11px] font-mono select-none',
        type === 'add' && 'bg-green-950/30',
        type === 'remove' && 'bg-red-950/30',
        type === 'context' && 'bg-muted/10',
        canComment && 'cursor-pointer group',
      )}
      onClick={canComment ? onClick : undefined}
    >
      <span className="text-muted-foreground/70">
        {lineNumber != null ? lineNumber : ''}
      </span>
      {canComment && (
        <span className="absolute left-0.5 hidden group-hover:flex items-center justify-center w-4 h-4 rounded text-muted-foreground hover:text-foreground">
          <Plus size={12} />
        </span>
      )}
      {hasComments && (
        <span className="absolute left-0.5 w-1.5 h-1.5 rounded-full bg-blue-400" />
      )}
    </div>
  );
}