import React from 'react';
import winRewardImage from '../../images/win-rewards.png';
import { translate } from '../../Helper';

function MyAccountTop() {

    return (
        <div className="ecre-flex ecre-items-center ecre-justify-between ecre-flex-wrap-reverse sm:ecre-flex-nowrap ecre-gap-5 ecre-mb-8">
            <div className="content ecre-text-center sm:!ecre-text-left sm:ecre-max-w-[500px]">
                <h3 className="ecre-text-neutral-950 ecre-text-[35px] ecre-font-medium ecre-mb-2">{translate('refer_and_win_exciting_rewards')}</h3>
                <ol className="!ecre-pl-0 sm:!ecre-pl-5 sm:ecre-list-[number] *:ecre-mb-1.5 !ecre-mt-0">
                    <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{translate('copy_coupon_invite')}</li>
                    <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{translate('discount_with_code')}</li>
                    <li className="ecre-text-zinc-500 ecre-text-sm ecre-font-normal">{translate('earn_discount_rewards')}</li>
                </ol>
            </div>
            <figure className="media ecre-flex ecre-justify-center ecre-w-full sm:!ecre-w-auto">
                <img src={winRewardImage} alt="" />
            </figure>
        </div>
    );
}

export default MyAccountTop;