/**
 * TextInput Component
 *
 * A reusable component for rendering a text input field.
 *
 * @component
 * @example
 * // Import the component
  import { TextInput } from './path-to-TextInput';

 * // Example usage:
  const YourComponent = () => {
    const [textValue, setTextValue] = useState('');
 
    return (
      <div>
        <label>Enter Text:</label>
        <TextInput
          value={textValue}
          onChange={(e) => setTextValue(e.target.value)}
        />
        <p>Entered Text: {textValue}</p>
      </div>
    );
  }
  export default YourComponent;
 *
 * @param {Object} props - The component properties.
 * @param {string} props.value - The current value of the input.
 * @param {function} props.onChange - The function called when the input value changes.
 * @param {boolean} [props.disabled=false] - A flag to disable the input.
 * @param {string} [props.placeholder=''] - The placeholder text for the input.
 * @returns {JSX.Element} - The rendered component.
 */
export const TextInput = ({ value, onChange, disabled = false, placeholder = '' }) => (
  <div className="input-container">
    <div>
      <input
        type="text"
        value={value}
        onChange={onChange}
        className="textInput"
        disabled={disabled}
        placeholder={placeholder}
      />
    </div>
  </div>
);

/**
 * SearchBox Component
 *
 * A reusable component for rendering a search input box with a search icon.
 *
 * @component
 * @example

 *
 * @param {Object} props - The component properties.
 * @param {string} [props.placeholder=''] - The placeholder text for the search input.
 * @param {string} props.value - The current value of the search input.
 * @param {function} props.onChange - The function called when the search input value changes.
 * @param {boolean} [props.disabled=false] - A flag to disable the search input.
 * @returns {JSX.Element} - The rendered component.
 */
    // Import the component
 import { SearchBox } from './path-to-SearchBox';

 // Example usage:
 const YourComponent = () => {
   const [customValue, setCustomValue] = useState('');

   return (
     <div>
       <label>Search:</label>
       <SearchBox
         placeholder="Search by invoice number, name, amount..."
         value={customValue}
         onChange={(e) => setCustomValue(e.target.value)}
         disabled={false} // Set to true if you want to disable the input
       />
       <p>Entered Value: {customValue}</p>
     </div>
   );
 }

/**
 * DropdownInput Component
 *
 * A reusable component for rendering a dropdown input with customizable options.
 *
 * @component
 * @example

 * @param {Object} props - The component properties.
 * @param {Object[]} props.options - An array of objects representing dropdown options.
 * @param {string} props.options[].value - The value of the option.
 * @param {string} props.options[].label - The label or display text of the option.
 * @param {string} props.value - The currently selected value from the options.
 * @param {function} props.onChange - The function called when the selected value changes.
 * @param {boolean} [props.disabled=false] - A flag to disable the dropdown.
 * @param {string} [props.placeholder=''] - The placeholder text for the dropdown.
 * @returns {JSX.Element} - The rendered component.
 */
 * // Import the component
 * import { DropdownInput } from './path-to-DropdownInput';
 *
 * // Example usage:
 * const YourComponent = () => {
 *   const options = [
 *     { value: 'option1', label: 'Option 1' },
 *     { value: 'option2', label: 'Option 2' },
 *     // Add more options as needed
 *   ];
 *   const [selectedValue, setSelectedValue] = useState('');
 *
 *   const handleChange = (value) => {
 *     setSelectedValue(value);
 *   };
 *
 *   return (
 *     <div>
 *       <label>Select an option:</label>
 *       <DropdownInput
 *         options={options}
 *         value={selectedValue}
 *         onChange={handleChange}
 *         placeholder="Select an option"
 *         disabled={false} // Set to true if you want to disable the dropdown
 *       />
 *       <p>Selected Value: {selectedValue}</p>
 *     </div>
 *   );
 * }
 *

import React, { useState } from 'react';
import PhoneNumberInput from './PhoneNumberInput'; // Adjust the import path based on your project structure

//! add this to your layout.js, index.js or any where your root file is located 
import '/node_modules/flag-icons/css/flag-icons.min.css';

function MyForm() {
  const [phoneNumber, setPhoneNumber] = useState('');

  const handlePhoneNumberChange = (newPhoneNumber) => {
    // Handle changes to the phone number
    setPhoneNumber(newPhoneNumber);
  };

  return (
    <div>
      <label>Phone Number:</label>
      <PhoneNumberInput
        value={phoneNumber}
        onChange={handlePhoneNumberChange}
      />
    </div>
  );
}

export default MyForm;

import React, { useState } from 'react';
import OtpInput from './OtpInput'; // Adjust the import path based on your project structure

function MyForm() {
   const [otp, setOtp] = useState('');
   const handleOtpChange = (newOtp) => {
    setOtp(newOtp);
  };

  return (
    <div>
      <label>Otp input:</label>
     <OtpInput value={otp} onChange={handleOtpChange} length={6} />
    </div>
  );
}

export default MyForm;

import React, { useState } from 'react';
import OtpInput from './OtpInput'; // Adjust the import path based on your project structure

function MyForm() {
    const [messageValue, setMessageValue] = useState('');

  return (
    <div>
      <label>message box:</label>
     <MessageBox  value={messageValue}  onChange={(e) => setMessageValue(e.target.value)}  placeholder="Type your message here..."/>
    </div>
  );
}

export default MyForm;

import React, { useState } from 'react';
import OtpInput from './OtpInput'; // Adjust the import path based on your project structure

function MyForm() {
    const [Richtext, setRichtex] = useState('');

  return (
    <div>
      <label>Rich text box:</label>
       <RichTextInput />
    </div>
  );
}

export default MyForm;

import React, { useState } from 'react';
import InputTag from './OtpInput'; // Adjust the import path based on your project structure

function MyForm() {
   const [tagsValue, setTagsValue] = useState([]);

  const handleTagsChange = (newTags) => {
    setTagsValue(newTags);
  };

  return (
    <div>
      <label>Input Tag box:</label>
        <InputTag value={tagsValue} onChange={handleTagsChange} />
    </div>
  );
}

export default MyForm;