import React, { FC, memo } from 'react'

import {
  formatClassList,
} from '../../utils'

type FormReadOnlyFieldPropTypes = {
  label: string,
  name: string,
  placeholder: string,
  [other:string]: unknown
}


const LABEL: string = `
  block
  mt-4
  mb-1
  leading-tight
  text-base
  text-bscs-gray-600
  text-left
  tracking-wider
`

const INPUT: string = `
  block
  min-h-2
  outline-none
  p-2
  rounded
  md:rounded-md
  shadow-inner
  text-base
  text-bscs-gray-1000
  w-full
`

const FormReadOnlyField: FC<FormReadOnlyFieldPropTypes> = ({
  label,
  name,
  placeholder,
  ...other
}: FormReadOnlyFieldPropTypes) => {
  return (
    <div {...other}>
      <label htmlFor={name} className={formatClassList(LABEL)}>{label}</label> 
      <input
        className={formatClassList(INPUT)}
        disabled
        name={name}
        placeholder={placeholder}
        type="text"
      />
    </div>
  ) 
}

export default memo(FormReadOnlyField)