import type { ReactNode } from 'react';
import './TaskDialog.css';

export interface TaskFact {
    label: string;
    value: ReactNode;
    testId?: string;
}

/** A due line under its own "Due by" name, so the name is not said twice. */
export const dueFactValue = (dueDisplay: string): string => {
    const rest = dueDisplay.replace(/^Due by:\s*/, '');

    return rest.charAt(0).toUpperCase() + rest.slice(1);
};

/** Who asked, when, and by when: two to a row, the name above its value. */
export const TaskFacts = ({ facts }: { facts: TaskFact[] }) => (
    <dl className="ahr-task-facts ak-facts">
        {facts.map((fact) => (
            <div key={fact.label} className="ak-facts__item" data-testid={fact.testId}>
                <dt>{fact.label}</dt>
                <dd>{fact.value}</dd>
            </div>
        ))}
    </dl>
);

export default TaskFacts;