import { FC } from 'react';
import { Main } from '@/app/ui/Main';
import Link from 'next/link';
import SettingsIcon from "@mui/icons-material/Settings";
import LogoutIcon from "@mui/icons-material/Logout";
import AccountCircle from "@mui/icons-material/AccountCircle";
import { useTranslations } from 'next-intl';


const Page: FC = () => {
    const t = useTranslations('account-page');

    return (
        <Main>
            <div className="flex flex-col items-center">
                <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
                    <div className="card-body">
                        <h2 className="card-title"><AccountCircle /> {t('title')}</h2>
                        <Link href="/account/settings" className='btn btn-neutral'><SettingsIcon /> {t('settings-button')}</Link>
                        <Link href="/account/logout" className='btn btn-error'><LogoutIcon /> {t('logout-button')}</Link>
                    </div>
                </div>

            </div>
        </Main>

    );
};

export default Page;