---
import { MdInfoOutline, MdOutlineWarningAmber, MdOutlineStarBorder, MdCheck } from "react-icons/md";

import colors from 'tailwindcss/colors';

/*export type MDXCalloutProps = {
    preset?: string,
    // --- custom ---
    color?: string,
    title?: string,
    icon?: any,
    children: any,
}*/

const props = Astro.props

function parsePresets(preset?: string): {color: string, title: string, Icon: any} {
    if (preset == null) return {color: 'blue', title: 'note', Icon: MdInfoOutline};

    if (preset.match('note')) {
        return {color: 'blue', title: 'note', Icon: MdInfoOutline};
    } else if (preset.match('warning')) {
        return {color: 'orange', title: 'warning', Icon: MdOutlineWarningAmber};
    } else if (preset.match('important')) {
        return {color: 'amber', title: 'important', Icon: MdOutlineStarBorder};
    } else if (preset.match('new')) {
        return {color: 'green', title: 'new', Icon: MdCheck};
    } else return {color: 'blue', title: 'note', Icon: MdInfoOutline};
}

let {color, title, Icon} = parsePresets(props.preset);

if (props.color) color = props.color;
if (props.title) title = props.title;
if (props.icon) Icon = props.icon;

let class_colors = "bg-[var(--props-bg-color)] border-[var(--props-border-color)] dark:bg-[var(--props-dark-bg-color)] dark:bg-opacity-70";

---

<div>
    <blockquote class={"p-4 border-s-4 mb-2 rounded-lg" + ' ' + class_colors}
        style={{
            //@ts-ignore
            '--props-bg-color': colors[color][100],
            //@ts-ignore
            '--props-border-color': colors[color][400],
            //@ts-ignore
            '--props-dark-bg-color': colors[color][900],
        }}>
        {/*<Icon className="h-full w-auto"/>*/}
        <p class="font-bold uppercase" style={{
            //@ts-ignore
            color: colors[color][400]
        }}>{title}</p>
        <slot/>
    </blockquote>
</div>