import Header from '../components/Header';
import { useState } from 'react';
import ContentDrawer from '../components/ContentDrawer';
import UserCreate from '../components/UserCreate';
import { useTranslation } from 'react-i18next';

export default function AccountsPage() {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);

  const showDrawer = () => setOpen(true);
  const closeDrawer = () => setOpen(false);

  return (
    <>
      <Header
        title={t('accounts')}
        additionalContent={
          <img
            src="./icons/header/add_2.svg"
            alt="add"
            style={{
              height: '18px',
              width: '18px',
              cursor: 'pointer',
            }}
            onClick={showDrawer}
          />
        }
      />

      <ContentDrawer open={open} closeDrawer={closeDrawer} type="create">
        <UserCreate />
      </ContentDrawer>
    </>
  );
}