import '../styles/styles.css'

interface InputFieldProps {
  label: string
  description?: string
  type?: 'text' | 'textarea'
  placeholder: string
  name: string
  inputMode?: 'url'
}

export const InputField = ({
  label,
  description,
  type = 'text',
  placeholder,
  name,
  inputMode
}: InputFieldProps) => (
  <div className='inputLabelWrapperMain'>
    <label className='form-label labelMain'>{label}</label>
    {description && <p className='labelDescriptionMain'>{description}</p>}
    {type === 'textarea' ? (
      <textarea
        className='inputMain'
        placeholder={placeholder}
        name={name}
      ></textarea>
    ) : (
      <input
        type={type}
        className='inputMain'
        placeholder={placeholder}
        name={name}
        inputMode={inputMode}
      />
    )}
  </div>
)

interface CheckboxFieldProps {
  label: string
  name: string
}

export const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
  <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
    <label className='form-label labelMain'>{label}</label>
    <input type='checkbox' className='CheckboxMain' name={name} />
  </div>
)

interface ImageUploadFieldProps {
  label: string
  description: string
}

export const ImageUploadField = ({
  label,
  description
}: ImageUploadFieldProps) => (
  <div className='inputLabelWrapperMain'>
    <label className='form-label labelMain'>{label}</label>
    {description && <p className='labelDescriptionMain'>{description}</p>}
    <div className='inputWrapperMain'>
      <input
        type='text'
        className='inputMain'
        inputMode='url'
        placeholder='We recommend to upload images to https://nostr.build/'
      />
      <button className='btn btnMain btnMainRemove' type='button'>
        <svg
          xmlns='http://www.w3.org/2000/svg'
          viewBox='-32 0 512 512'
          width='1em'
          height='1em'
          fill='currentColor'
        >
          <path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
        </svg>
      </button>
    </div>
  </div>
)