1  import React from 'react'
 2  
 3  export interface InputProps {
 4    label: string
 5    id: string
 6    value?: string
 7    onChange?: (value: string) => void
 8    placeholder?: string
 9    required?: boolean
10    className?: string
11  }
12  
13  export const Input: React.FC<InputProps> = ({
14    label,
15    id,
16    value = '',
17    onChange,
18    placeholder,
19    required = false,
20    className = '',
21  }) => {
22    return (
23      <div className={`flex flex-col gap-2 ${className}`}>
24        <label
25          htmlFor={id}
26          className="text-sm font-medium text-gray-700 dark:text-gray-200"
27        >
28          {label}
29          {required && <span className="text-red-500 ml-1">*</span>}
30        </label>
31        <input
32          type="text"
33          id={id}
34          value={value}
35          onChange={(e) => onChange?.(e.target.value)}
36          placeholder={placeholder}
37          required={required}
38          className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
39        />
40      </div>
41    )
42  }