import { ProblemId, SolutionStatus, UserId } from '../../shared/model'
import { Markdown } from './Markdown'

type Props = {
    sentBy?: UserId
    forProblem: ProblemId
    content: string
    status?: SolutionStatus
}

export const Solution = ({ sentBy, forProblem, content }: Props) => {
    return (
        <div class="solution">
            <div class="solution-header">
                <div>
                    Soluzione
                    {sentBy && (
                        <>
                            {' '}
                            di <a href={`/user/${sentBy}`}>@{sentBy}</a>
                        </>
                    )}
                    {forProblem && (
                        <>
                            {' '}
                            per il <a href={`/problem/${forProblem}`}>Problema {forProblem}</a>
                        </>
                    )}
                </div>
            </div>
            <div class="solution-content">
                <Markdown source={content} />
            </div>
        </div>
    )
}