import { refToUserId } from '../../shared/db-refs.js'
import { Markdown } from './Markdown.jsx'

export const Solution = ({ sentBy, forProblem, content }) => {
    const userId = refToUserId(sentBy)
    const problemId = refToUserId(forProblem)

    return (
        <div class="solution">
            <div class="solution-header">
                <div>
                    Soluzione
                    {userId && (
                        <>
                            {' '}
                            di <a href={`/user/${userId}`}>@{userId}</a>
                        </>
                    )}
                    {problemId && (
                        <>
                            {' '}
                            per il <a href={`/problem/${problemId}`}>Problema {problemId}</a>
                        </>
                    )}
                </div>
            </div>
            <div class="solution-content">
                <Markdown source={content} />
            </div>
        </div>
    )
}