import React from 'react';

interface VerticalBarProps {
  intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
  height?: string | number;
}

/**
 * VerticalBar - A semantic decorative bar.
 */
export function VerticalBar({ intent = 'primary', height = '2rem' }: VerticalBarProps) {
  const intentClasses = {
    primary: 'bg-[var(--ui-color-intent-primary)]',
    secondary: 'bg-[var(--ui-color-intent-secondary)]',
    success: 'bg-[var(--ui-color-intent-success)]',
    warning: 'bg-[var(--ui-color-intent-warning)]',
    critical: 'bg-[var(--ui-color-intent-critical)]',
  };

  return (
    <div 
      className={`w-1 ${intentClasses[intent]}`} 
      style={{ height: typeof height === 'number' ? `${height * 0.25}rem` : height }} 
    />
  );
}