import React, { FunctionComponent } from 'react';

export interface AlertProps {
    title?: string;
    description?: string;
    position?: 'tl' | 'tr' | 'bl' | 'br' | 'center';
    className?: string;
}
 
const Alert: FunctionComponent<AlertProps> = ({ title, description, position, className, children, ...props }) => {
    let positionClass = '';
    
    // <purge>
    switch (position) {
        case 'bl':
            positionClass = 'bottom-8 left-8 mt-8 mr-8';
            break;
        case 'br':
            positionClass = 'bottom-8 right-8 mt-8 ml-8';  
            break;
        case 'tl':
            positionClass = 'top-8 left-8 mb-8 mr-8';
            break;
        case 'tr':
            positionClass = 'top-8 right-8 mb-8 ml-8';
            break;
    
        default:
            positionClass = '-translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 transform';
            break;
    }
    // </purge>

    return (
        <div className={ `fixed rounded-md p-4 ${positionClass} ${className || 'bg-midnight-gray text-white'}` } { ...props }>
            { title && (
                <h3 className="text-sm font-medium">
                    { title }
                </h3>
            ) }
            { children || (
                <div className="mt-2 text-sm">
                    <p>{ description }</p>
                </div>
            ) }
        </div>
    );
};
 
export default Alert;