import React from 'react';
import styled from 'styled-components';

import { useAtom } from 'jotai';
import ActionItem from './ActionItem';
import { countReducerAtom } from '../../../store';

const Actions: React.FC = () => {
  const [, dispatch] = useAtom(countReducerAtom);

  const handleBulkUpdateClick = () => {
    dispatch({ type: 'bulkUpdate' });
  };

  return (
    <>
      <Flex>
        <ActionItem name="SEND EMAIL" onClick={handleBulkUpdateClick} />
        <ActionItem
          name="SEND SMS"
          onClick={() => console.log('ROUTING MAP clicked')}
        />
      </Flex>
    </>
  );
};

const Flex = styled.div`
  display: flex;
  height: 31px;
`;

export default Actions;
