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

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
}

export const Input: React.FC<InputProps> = ({ label, error, className, ...props }) => {
  return (
    <div className="space-y-1">
      {label && <label className="block text-sm font-medium text-[var(--ink)]">{label}</label>}
      <input
        className={cn(
          'w-full h-10 px-3 rounded-[var(--r)] border bg-[var(--surface)] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--brand-500)] focus:ring-2 focus:ring-[var(--brand-500)]/20 transition',
          error && 'border-[var(--danger)]',
          className
        )}
        {...props}
      />
      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
    </div>
  );
};