import { Checkbox, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import React from 'react';
import { iconbase, iconstyles } from '../../InfoPops/_/layericons';

const useStyle = makeStyles({
  root: {
    display: 'flex',
    color: '#fff',
    alignItems: 'center',
  },

  check: {
    flexShrink: 0,
  },
  label: {
    flexGrow: 1,
  },
  icon: {
    ...iconbase,
    width: '1.4rem',
    height: '1.4rem',
    marginRight: '0.5rem',
  },

  ...iconstyles,
});

function RowItem({ icon, name, label, checked, onChange }) {
  const classes = useStyle();

  return (
    <div className={classes.root}>
      <div className={clsx(classes.icon, classes[icon])}></div>
      <div className={classes.label}>
        {label}
      </div>
      <div className={classes.check}>
        <Checkbox color="primary" checked={checked} onChange={onChange} name={name} />
      </div>
    </div>
  )
}

export default RowItem;