import React, { Children, useMemo } from 'react'

import { IFormField } from './FormField.interface'
import { StyledFieldContainer } from './FormField.theme'
import { getId } from '@/helpers/uuid'

export const FormField = ({
  id,
  label,
  leftIcon,
  rightIcon,
  isCheckRadio,
  className,
  children,
  ...props
}: IFormField) => {
  const itemID = id ? id : useMemo(() => getId(), [])
  return (
    <StyledFieldContainer
      $isCheckRadio={isCheckRadio}
      $hasRightIcon={rightIcon ? true : false}
      $hasLeftIcon={rightIcon ? true : false}
      className={className}
    >
      {label && (
        <label
          htmlFor={itemID}
          className="d-blocks captions text-uppercase mb-2"
        >
          {label}
        </label>
      )}
      <div>
        {leftIcon && leftIcon}
        {children}
        {rightIcon && rightIcon}
      </div>
    </StyledFieldContainer>
  )
}

export default FormField