import React from 'react';
import type { Metadata } from 'next';
import { useTranslations } from 'next-intl';
import {Link} from "../../../../navigation";

export const metadata: Metadata = {
    title: 'Bbuddy - Account - Profile Settings',
    description: 'Bbuddy desc Profile settings'
};

export default function Settings({ params }: { params: { userId: string } }) {
    const t = useTranslations('Account.Settings');

    return (
        <>
            <ol className="breadcrumb">
                <li className="breadcrumb-item active" aria-current="page">{t('title')}</li>
            </ol>
            <form className="form-settings" action="">
                <div className="user-avatar">
                    <div className="user-avatar__edit">
                        <input className="" type="file" id="input-file" />
                        <label htmlFor="input-file" className="form-label" />
                    </div>
                    <div className="user-avatar__text">{t('photo-desc')}</div>
                </div>
                <div className="form-field">
                    <input type="text" placeholder={t('name')} className="base-input" id="" value="" />
                </div>
                <div className="form-field">
                    <input type="text" placeholder={t('surname')} className="base-input" id="" value="" />
                </div>
                <div className="form-field date">
                    <input className="base-input " type="text" placeholder={t('birthday')} id="" value="" />
                </div>
                <div className="form-field">
                    <input type="email" placeholder={t('email')} className="base-input" id="" value="" />
                </div>
                <div className="form-link">
                    <Link href={`/${params.userId}/settings/change-password` as any}>
                        {t('change-password')}
                    </Link>
                </div>
                <button className="btn-apply">{t('save')}</button>
            </form>
        </>
    );
};