import { prependBaseUrl } from '../../shared/utils'

import { Markdown } from './Markdown'

type Props = {
    id: string
    title: string
    content: string
    solutionsCount?: number
}

export const Problem = ({ id, title, content, solutionsCount }: Props) => {
    return (
        <div class="problem">
            <div class="problem-header">
                <div class="problem-title">
                    <a href={prependBaseUrl(`/problem/${id}`)}>{title}</a>
                </div>
            </div>
            <div class="problem-content">
                <Markdown source={content} />
            </div>
            {solutionsCount !== undefined && solutionsCount > 0 && (
                <div class="problem-footer">
                    {solutionsCount} soluzion{solutionsCount === 1 ? 'e' : 'i'}
                </div>
            )}
        </div>
    )
}