import propTypes from 'prop-types'

const Category = (props) => {
  return (
    <div className='flex flex-shrink-0 items-center gap-6 mr-6'>
      <button onClick={props.func} className='mx-auto text-center text-l
       font-poppins font-semibold text-slate-800 
       py-4 hover:scale-110 duration-200' 
       href='' >
        {props.name}
      </button>
      <div className={`w-0.5 h-6 bg-black opacity-10 
      ${props.small || props.last && !props.small  ? 'hidden' : 'block'}`}></div>
    </div>
  )
}

Category.propTypes = {
  name: propTypes.string,
  func: propTypes.func,
  small: propTypes.bool,
  last: propTypes.bool
}

export default Category