import { XIcon } from 'lucide-react';
import './TaskDialog.css';

export type TaskStatusTone = 'open' | 'done' | 'bad' | 'ended';

const PILL_TONE: Record<TaskStatusTone, string> = { open: '', done: ' ak-pill--ok', bad: ' ak-pill--bad', ended: '' };

interface TaskStatusRowProps {
    /** Absent while the task loads: the row still holds the close. */
    label?: string;
    tone?: TaskStatusTone;
    /** Present when the task is open in a dialog; the close sits on the status's row. */
    onClose?: () => void;
}

/** The task's status at the top left, on one row with the dialog's close. */
export const TaskStatusRow = ({ label, tone = 'open', onClose }: TaskStatusRowProps) => {
    if (!label && !onClose) {
        return null;
    }

    return (
        <div className="ahr-task-status-row">
            {label ? (
                <span className={`ak-pill ak-pill--square${PILL_TONE[tone]}`} data-testid="task-status">
                    {label}
                </span>
            ) : <span />}
            {onClose && (
                <button type="button" className="btn btn-stripped btn-icon" aria-label="Close" onClick={onClose}>
                    <XIcon aria-hidden="true" />
                </button>
            )}
        </div>
    );
};

export default TaskStatusRow;