import React from 'react';
import { Collapse } from 'antd';
import EmojiPart from './Part';
import { data } from './data';

export default function Emoji(props) {
  const { value, onChange } = props;

  const items = React.useMemo(() => Object.keys(data).map(key => ({
    key,
    label: data[key].label,
    children: <EmojiPart data={data[key]} value={value} onChange={onChange} />
  })), [value]);

  return (
    <Collapse items={items} defaultActiveKey={items[0].key} />
  );
}
