import React, { Suspense } from 'react';
import type { Metadata } from 'next';
import { useTranslations } from 'next-intl';
import { Link } from '../../../../../navigation';
import { CustomInput } from '../../../../../components/view/CustomInput';
import { i18nText } from '../../../../../i18nKeys';

export const metadata: Metadata = {
    title: 'Bbuddy - Account - Messages',
    description: 'Bbuddy desc messages'
};

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

    return (
        <>
            <ol className="breadcrumb">
                <li className="breadcrumb-item active" aria-current="page">{i18nText('accountMenu.messages', locale)}</li>
            </ol>
            <Suspense>
                <CustomInput placeholder={i18nText('name', locale)} />
            </Suspense>
            <div className="messages-session">
                <Link
                    className="card-profile"
                    href={'1' as any}
                >
                    <div className="card-profile__header">
                        <div className="card-profile__header__portrait">
                            <img src="/images/person.png" className="" alt="" />
                        </div>
                        <div className="card-profile__header__inner">
                            <div style={{ width: '100%' }}>
                                <div className="card-profile__header__name">
                                    David
                                    <span className="count">14</span>
                                </div>
                                <div className="card-profile__header__title">
                                    Lorem ipsum dolor sit at, consecte...
                                </div>
                                <div className="card-profile__header__date ">
                                    25 may
                                </div>
                            </div>
                        </div>
                    </div>
                </Link>
                <Link
                    className="card-profile"
                    href={'2' as any}
                >
                    <div className="card-profile__header">
                        <div className="card-profile__header__portrait">
                            <img src="/images/person.png" className="" alt="" />
                        </div>
                        <div className="card-profile__header__inner">
                            <div style={{ width: '100%' }}>
                                <div className="card-profile__header__name">David</div>
                                <div className="card-profile__header__title">
                                    Lorem ipsum dolor sit at, consecte...
                                </div>
                                <div className="card-profile__header__date ">
                                    25 may
                                </div>
                            </div>
                        </div>
                    </div>
                </Link>
                <Link
                    className="card-profile"
                    href={'3' as any}
                >
                    <div className="card-profile__header">
                        <div className="card-profile__header__portrait">
                            <img src="/images/person.png" className="" alt="" />
                        </div>
                        <div className="card-profile__header__inner">
                            <div style={{ width: '100%' }}>
                                <div className="card-profile__header__name">David</div>
                                <div className="card-profile__header__title">
                                    Lorem ipsum dolor sit at, consecte...
                                </div>
                                <div className="card-profile__header__date ">
                                    25 may
                                </div>
                            </div>
                        </div>
                    </div>
                </Link>
            </div>
        </>
    );
};