import Image from 'next/image'
import styles from './style.module.css'
import { useTranslation } from 'next-i18next'
import { commonCopyText } from '@/common/utils'

interface Iprops {
    posPrompt: string
    negPrompt?: string
    executionId?: string
}
const CopyPrompt = ({ posPrompt, negPrompt, executionId }: Iprops) => {
    const { t } = useTranslation(['studio', 'common'])
    const copyText = () => {
        let value = posPrompt
        if (negPrompt) value = value + ' --n ' + negPrompt
        commonCopyText(value, { executionId }, t('common:toast.copySuccess'))
    }

    return (
        <div className={`ag16 ${styles.textPrompt}`}>
            <div className={styles.text}>
                <span>{posPrompt}</span>
                {negPrompt ? (
                    <div className={styles.textNegativePrompt}>
                        <span className={styles.dividing}> --n </span>
                        <span>{negPrompt}</span>
                    </div>
                ) : (
                    <span> </span>
                )}
            </div>
            <div
                className={styles.copy}
                onClick={() => {
                    copyText()
                }}
            >
                <Image
                    src="/copy.svg"
                    width={16}
                    height={16}
                    alt="copy-icon"
                    className={styles.copyIcon}
                ></Image>
            </div>
        </div>
    )
}

export default CopyPrompt
