import React from "react";
import './result.scss'
import {CheckCircleFilled} from "../icons/CheckCircleFilled.tsx";
import {NotFound} from "../icons/NotFound.tsx";

type Status = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500';
export type ResultProps = {
    extra?: React.ReactNode;
    title?: React.ReactNode;
    subTitle?: React.ReactNode;
    icon?: React.ReactNode;
    status?: Status //number | string;
};
export const IconMap: {
    [key in Status]: React.ReactNode
} = {
    success: <CheckCircleFilled/>,
    error: <CheckCircleFilled/>,
    info: <CheckCircleFilled/>,
    warning: <CheckCircleFilled/>,
//     error: CloseCircleFilled,
//     info: ExclamationCircleFilled,
//     warning: WarningFilled,
    '404': <NotFound/>,
    '500': <NotFound/>,
    '403': <NotFound/>,
//     '500': serverError,
//     '403': unauthorized,
};
export const Index: React.FC<ResultProps> = (props) => {
    const icon = props.icon || (props.status ? IconMap[props.status] : <></>)
    return <div className="result-wrapper">
        <div className="icon">{icon}</div>
        <div className="title">{props.title}</div>
        {props.subTitle && <div className="sub-title">{props.subTitle}</div>}
        <div className="extra">{props.extra}</div>
    </div>
}