'use client';

import * as React from 'react';
// import type { Metadata } from 'next';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';

import { config } from '@/config';
import { Members } from '@/components/dashboard/settings/members';

// export const metadata = { title: `Team | Settings | Dashboard | ${config.site.name}` } satisfies Metadata;

export default function Page(): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Stack spacing={4}>
      <div>
        <Typography variant="h4">{t('team')}</Typography>
      </div>
      <Members
        members={[
          {
            id: 'USR-000',
            name: 'team member1',
            avatar: '/assets/avatar.png',
            email: 'teamMember1@devias.io',
            role: 'Owner',
          },
          {
            id: 'USR-002',
            name: 'team member2',
            avatar: '/assets/avatar-2.png',
            email: 'teamMember2@domain.com',
            role: 'Standard',
          },
        ]}
      />
    </Stack>
  );
}
