import React from 'react';
import { unstable_setRequestLocale } from 'next-intl/server';

export default function Directions({ params: { locale } }: { params: { locale: string } }) {
    unstable_setRequestLocale(locale);

    return (
        <div className="main-popular">
            <div className="b-inner">
                <h2 className="title-h2">Popular Topics</h2>
                <div className="main-popular__row">
                    <div className="main-popular__coll">
                        <div className="b-popular">
                            <div className="b-popular__image">
                                <img src="/images/popular1.png" alt=""/>
                            </div>
                            <div className="b-popular__inner">
                                <div className="b-popular__title">Work Life Balance</div>
                                <div className="b-popular__wrap-link">
                                    <a className="b-popular__link" href="#">23 experts</a> |
                                    <a className="b-popular__link" href="#">245 offers</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="main-popular__coll">
                        <div className="b-popular">
                            <div className="b-popular__image">
                                <img src="/images/popular2.png" alt=""/>
                            </div>
                            <div className="b-popular__inner">
                                <div className="b-popular__title">Strategic Session</div>
                                <div className="b-popular__wrap-link">
                                    <a className="b-popular__link" href="#">23 experts</a> |
                                    <a className="b-popular__link" href="#">245 offers</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="main-popular__coll d-none d-md-block">
                        <div className="b-popular">
                            <div className="b-popular__image">
                                <img src="/images/popular3.png" alt=""/>
                            </div>
                            <div className="b-popular__inner">
                                <div className="b-popular__title">Personal Growth</div>
                                <div className="b-popular__wrap-link">
                                    <a className="b-popular__link" href="#">23 experts</a> |
                                    <a className="b-popular__link" href="#">245 offers</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="main-popular__coll d-none d-lg-block">
                        <div className="b-popular">
                            <div className="b-popular__image">
                                <img src="/images/popular4.png" alt=""/>
                            </div>
                            <div className="b-popular__inner">
                                <div className="b-popular__title">Career Planning</div>
                                <div className="b-popular__wrap-link">
                                    <a className="b-popular__link" href="#">23 experts</a> |
                                    <a className="b-popular__link" href="#">245 offers</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="main-popular__coll d-none d-lg-block">
                        <div className="b-popular">
                            <div className="b-popular__image">
                                <img src="/images/popular5.png" alt=""/>
                            </div>
                            <div className="b-popular__inner">
                                <div className="b-popular__title">Executive Coaching</div>
                                <div className="b-popular__wrap-link">
                                    <a className="b-popular__link" href="#">23 experts</a> |
                                    <a className="b-popular__link" href="#">245 offers</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="main-popular__coll d-none d-xl-block">
                        <div className="b-popular">
                            <div className="b-popular__image">
                                <img src="/images/popular6.png" alt=""/>
                            </div>
                            <div className="b-popular__inner">
                                <div className="b-popular__title">Career Development</div>
                                <div className="b-popular__wrap-link">
                                    <a className="b-popular__link" href="#">23 experts</a> |
                                    <a className="b-popular__link" href="#">245 offers</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}