'use client'

import { type InputHTMLAttributes, forwardRef } from 'react'
import { cn } from '@/lib/utils'

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

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, label, error, id, ...props }, ref) => (
    <div className="space-y-1.5">
      {label && (
        <label htmlFor={id} className="block text-sm font-semibold text-[var(--premium-muted-text)]">
          {label}
        </label>
      )}
      <input
        ref={ref}
        id={id}
        className={cn(
          'w-full rounded-xl border border-[var(--premium-border)] bg-[var(--premium-field-bg)] px-3 py-2 text-sm text-[var(--premium-field-text)] shadow-[inset_0_1px_2px_rgba(0,0,0,0.12)] placeholder:text-[var(--premium-field-placeholder)] transition-all focus:border-brand-400/70 focus:outline-none focus:ring-2 focus:ring-brand-400/20 focus:shadow-[inset_0_1px_2px_rgba(0,0,0,0.16),0_0_24px_-14px_rgba(61,139,110,0.95)]',
          error && 'border-red-500',
          className,
        )}
        {...props}
      />
      {error && <p className="text-xs text-red-500">{error}</p>}
    </div>
  ),
)

Input.displayName = 'Input'