import React, {useState} from 'react';
import Header from '@components/Header';
import AllNotifications from '@screens/notifications/AllNotifications';
import ActivityLogs from '@screens/notifications/ActivityLogs';
import {
  Container,
  Wrapper,
  Tabs,
  Tab,
  TabText,
  WrapperContentStyle,
} from '@styles/screens/notifications';

const Notifications = () => {
  const [activeTab, setTab] = useState(1);
  return (
    <Container>
      <Header showBackButton={false} title="Notifications" />
      <Tabs>
        <Tab onPress={() => setTab(1)} active={activeTab === 1} testID="notif">
          <TabText>All Notifications</TabText>
        </Tab>
        <Tab onPress={() => setTab(2)} active={activeTab === 2} testID="actLog">
          <TabText>Activity logs</TabText>
        </Tab>
      </Tabs>

      <Wrapper contentContainerStyle={WrapperContentStyle}>
        {activeTab === 1 && <AllNotifications />}
        {activeTab === 2 && <ActivityLogs />}
      </Wrapper>
    </Container>
  );
};

export default Notifications;