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

export const ModalTabs = ({ active, setActiveTab }) => {
  return (
    <TabWrapper className="d-flx-alc px-4">
      <SettingsTabButton
        title="General"
        onclick={() => setActiveTab('general')}
        className={active === 'general' ? 'active' : ''}
      />
      <SettingsTabButton
        title="Notification"
        onclick={() => setActiveTab('notification')}
        className={active === 'notification' ? 'active' : ''}
      />
      <SettingsTabButton
        title="Responses"
        onclick={() => setActiveTab('responses')}
        className={active === 'responses' ? 'active' : ''}
      />
    </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>
  );
};

export const AgentsModalTabs = ({ actions, agentTabControl }) => {
  return (
    <TabWrapper className="d-flx-alc alt">
      <TextButton
        title="All Agent"
        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;
  }
`;
