import React from 'react';
import { cn } from '../../utils/cn';

export function Input({
  className,
  type = 'text',
  error,
  ...props
}) {
  return (
    <input
      type={type}
      className={cn(
        'block w-full rounded-lg shadow-sm sm:text-sm transition-colors duration-200',
        error
          ? 'border-error-300 text-error-900 placeholder-error-300 focus:border-error-500 focus:ring-error-500'
          : 'border-neutral-300 focus:border-primary-500 focus:ring-primary-500',
        className
      )}
      {...props}
    />
  );
}

export function FormGroup({ className, children, ...props }) {
  return (
    <div className={cn('space-y-1', className)} {...props}>
      {children}
    </div>
  );
}

export function Label({ className, children, ...props }) {
  return (
    <label
      className={cn(
        'block text-sm font-medium text-neutral-700',
        className
      )}
      {...props}
    >
      {children}
    </label>
  );
}

export function ErrorMessage({ children }) {
  if (!children) return null;
  
  return (
    <p className="text-sm text-error-600 mt-1">
      {children}
    </p>
  );
} 