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 - Messages',
    description: 'Bbuddy desc messages'
};

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

    return (
        <>
            <ol className="breadcrumb">
                <li className="breadcrumb-item active" aria-current="page">{t('title')}</li>
            </ol>
            <div className="messages-session">
                <Link
                    className="card-profile"
                    href={`/${params.userId}/messages/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 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>
                </Link>
                <Link
                    className="card-profile"
                    href={`/${params.userId}/messages/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 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>
                </Link>
                <Link
                    className="card-profile"
                    href={`/${params.userId}/messages/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 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>
                </Link>
            </div>
        </>
    );
};
