import styles from './style.module.css'
import { IS_EN } from '@/common/constans/international'
import { useTranslation } from 'react-i18next'

const Example = () => {
    const { t } = useTranslation('studio')
    const phrase = [t('promptExample.phrase1'), t('promptExample.phrase2')]

    const positiveCaseInfos = [
        {
            title: t('promptExample.positiveExample1'),
            content: t('promptExample.positiveExample1Content'),
        },
        {
            title: t('promptExample.positiveExample2'),
            content: t('promptExample.positiveExample2Content'),
        },
    ]

    const negativeCaseInfos = [
        {
            title: t('promptExample.negativeExample1'),
            content: t('promptExample.negativeExample1Content'),
        },
    ]

    return (
        <>
            {IS_EN ? (
                <div className={styles.content}>
                    <p className={`ag14 ${styles.contentTitle}`}>
                        <span className={styles.highlighted}>
                            {
                                'Describe the image you want to generate with words/phrases/sentences and separate them with commas. '
                            }
                        </span>
                        <span>Examples:</span>
                    </p>
                    <ul className={`ag14 ${styles.contentDesc}`}>
                        {phrase.map((item, index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>
                    <p className={`ag14 ${styles.contentC}`}>
                        <span className={styles.highlighted}>Positive prompt:</span>
                        <span> </span>
                        <span>
                            Try to use positive language to describe the requirements, avoiding the
                            use of negative words. Good sentence structure and precise descriptions
                            will enhance the richness and depth of the generated product scenes.
                        </span>
                        <span> </span>
                        <span className={styles.highlighted}>
                            {
                                'To emphasize certain parts, use parentheses () or double parentheses (()) to indicate their importance.'
                            }
                        </span>
                        <span> </span>
                        <span>
                            If a particular aspect is crucial, you can rearrange the position,
                        </span>
                        <span> </span>
                        <span className={styles.highlighted}>
                            placing the most important element at the beginning to give them greater
                            significance.
                        </span>
                        <span> </span>
                        <span>
                            If you wish to generate images in a specific style, you can specify the
                            photography equipment, camera model, and lens.
                        </span>
                    </p>
                    {positiveCaseInfos.map((caseInfo, index) => (
                        <div key={index} className={`ag14 ${styles.contentDesc}`}>
                            <p className={`${styles.caseTitleI18n} ${styles.highlighted}`}>
                                {caseInfo.title}
                            </p>
                            <p className={styles.caseContent}>{caseInfo.content}</p>
                        </div>
                    ))}
                    <p className={`ag14 ${styles.contentC}`}>
                        <span className={styles.highlighted}>Negative prompt:</span>
                        <span> </span>
                        <span>
                            Negative prompt means “no” or “not” by default, so DO NOT include
                            additional negative word. Avoid lengthy sentences and simply provide
                            word/phrase.
                        </span>
                    </p>
                    {negativeCaseInfos.map((caseInfo, index) => (
                        <div key={index} className={`ag14 ${styles.contentDesc}`}>
                            <p className={`${styles.caseTitleI18n} ${styles.highlighted}`}>
                                {caseInfo.title}
                            </p>
                            <p className={styles.caseContent}>{caseInfo.content}</p>
                        </div>
                    ))}
                </div>
            ) : (
                <div className={styles.content}>
                    <p className={`ag14-t ${styles.contentTitle}`}>
                        {t('promptExample.describeTips')}
                    </p>
                    <ul className={`ag14 ${styles.contentDesc}`}>
                        {phrase.map((item, index) => (
                            <li key={index}>{item}</li>
                        ))}
                    </ul>
                    <p className={`ag14-t ${styles.contentC}`}>{t('promptExample.positive')}</p>
                    {positiveCaseInfos.map((caseInfo, index) => (
                        <div key={index} className={`ag14 ${styles.contentDesc}`}>
                            <p className={styles.caseTitle}>{caseInfo.title}</p>
                            <p className={styles.caseContent}>{caseInfo.content}</p>
                        </div>
                    ))}
                    <p className={`ag14-t ${styles.contentC}`}>{t('promptExample.negative')}</p>
                    {negativeCaseInfos.map((caseInfo, index) => (
                        <div key={index} className={`ag14 ${styles.contentDesc}`}>
                            <p className={styles.caseTitle}>{caseInfo.title}</p>
                            <p className={styles.caseContent}>{caseInfo.content}</p>
                        </div>
                    ))}
                </div>
            )}
        </>
    )
}

export default Example
