import React, { useState, useEffect, useContext } from 'react';
import ItemHeader from './ItemHeader';
import { DataContext } from './Context/index';
import styles from './item.less';

function DataItem({ id, name = '', enable }: { id: number; name: string; enable: boolean }) {
  const [localName, setLocalName] = useState(name);
  const { onSetEdit } = useContext(DataContext);

  useEffect(() => {
    setLocalName(name);
  }, [name]);

  return (
    <li className={styles.li}>
      <ItemHeader enable={enable} name={localName} id={id} onEditChange={onSetEdit} />
    </li>
  );
}

export default DataItem;
