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

type Props = React.InputHTMLAttributes<HTMLInputElement> & {
  label?: string;
  error?: string;
};

export const Input = ({ className, label, error, ...props }: Props) => {
  const input = (
    <input
      className={cn(
        'w-full rounded-lg border transition-all duration-200 bg-white px-4 py-2.5 text-sm text-slate-900',
        'placeholder:text-slate-400',
        error
          ? 'border-rose-300 focus:border-rose-500 focus:ring-2 focus:ring-rose-500/30'
          : 'border-slate-300 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/30',
        className
      )}
      {...props}
    />
  );

  if (label || error) {
    return (
      <div className="space-y-1.5">
        {label && <label className="block text-sm font-medium text-slate-700">{label}</label>}
        {input}
        {error && <p className="text-xs text-rose-600">{error}</p>}
      </div>
    );
  }

  return input;
};





