const inputStyle = {
  backgroundImage:
    "linear-gradient(180deg, rgba(46, 27, 61, 0.92) 0%, rgba(35, 24, 62, 0.94) 100%), linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%)",
  backgroundOrigin: "border-box",
  backgroundClip: "padding-box, border-box",
  border: "1px solid #d680ff66",
  boxShadow:
    "0 -7px 20px rgba(7, 0, 18, 0.46), 0 6px 14px rgba(5, 2, 12, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -2px 0 rgba(12, 7, 27, 0.66)",
  backdropFilter: "blur(14px)",
  WebkitBackdropFilter: "blur(14px)",
};

interface FormInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
  multiline?: boolean;
  rows?: number;
}

export function FormInput({ label, value, onChange, placeholder, multiline, rows = 6 }: FormInputProps) {
  return (
    <div>
      <label className="mb-3 block text-sm font-bold text-[#FBE7F5]">{label}</label>
      {multiline ? (
        <textarea
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          dir="rtl"
          rows={rows}
          className="w-full resize-none rounded-3xl px-4 py-3 text-sm text-white outline-none placeholder:text-white/45"
          style={inputStyle}
        />
      ) : (
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          dir="rtl"
          className="h-14 w-full rounded-full px-4 text-base text-white outline-none placeholder:text-white/45"
          style={inputStyle}
        />
      )}
    </div>
  );
}
