import React from 'react';
import { StyledBulkItem, Typo } from './ActionStyles';
import styled from 'styled-components';

interface ActionItemProps {
  name: string;
  onClick: () => void;
  icon?: React.ReactNode;
}

const ActionItem: React.FC<ActionItemProps> = ({ name, onClick, icon }) => {
  return (
    <StyledBulkItem onClick={onClick}>
      <Typo>{name}</Typo>
      {icon && <IconWrapper>{icon}</IconWrapper>}
    </StyledBulkItem>
  );
};

const IconWrapper = styled.div`
  display: flex;
  align-items: center;
  height: 24px;
  width: 34px;

  & > svg {
    width: 100%;
    transform: scale(0.7);
  }
`;

export default ActionItem;
