import { Fragment } from 'react';

export function HomeMarquee({ phrases }: { phrases: string[] }) {
    if (phrases.length === 0) {
        return null;
    }

    const track = (offset: number) => (
        <div className="marquee-content">
            {phrases.map((phrase) => (
                <Fragment key={`${offset}-${phrase}`}>
                    <div className="marquee-icon">
                        <img src="/assets/images/marquee/icon-marquee-1.svg" alt="" />
                    </div>
                    <p data-text={phrase}>{phrase}</p>
                </Fragment>
            ))}
        </div>
    );

    return (
        <>
                <div className="marquee-ticker-section">
                    <div className="marquee-ticker-box">
                        {track(1)}
                        {track(2)}
                    </div>
                </div>
        </>
    );
}