import React from 'react';
import styled from 'styled-components';
import { TextButton } from '../../components/common/buttons/PrimaryBtn';

export const ModalTabs = () => {
  return (
    <TabWrapper className="d-flx-alc">
      <TextButton title="General" className="active" />
      <TextButton title="Notification" />
      <TextButton title="Responses" />
    </TabWrapper>
  );
};
export const AgentsTabs = ({ actions, agentTabControl }) => {
  return (
    <TabWrapper className="d-flx-alc alt">
      <TextButton
        title="Agent list"
        className={agentTabControl ? 'active' : ''}
        onclick={actions}
      />
      <TextButton
        title="Agent groups"
        className={!agentTabControl ? 'active' : ''}
        onclick={actions}
      />
    </TabWrapper>
  );
};

const TabWrapper = styled.div`
  border: 1px solid #e8edff;
  &.alt {
    border: none;
  }
`;
