import { FaSolidCheck, FaSolidExclamation, FaSolidXmark } from 'solid-icons/fa';
import { Button } from '@/components/base/Buttons';
import { Dynamic } from 'solid-js/web';

interface NotificationProps {
    message: string;
    type: 'success' | 'error';
    onClose: () => void;
}

const Notification = (props: NotificationProps) => {
    const isSuccess = () => props.type === 'success';

    const bgColor = () => isSuccess()
        ? 'bg-green-100 border-green-400'
        : 'bg-red-100 border-red-400';
    const textColor = () => isSuccess() ? 'text-green-800' : 'text-red-800';
    const Icon = () => isSuccess() ? FaSolidCheck : FaSolidExclamation;

    return (
        <div
            class={`relative flex items-center p-4 border rounded-md ${bgColor()}`}
        >
            <span class={`mr-3 ${textColor()}`} style={{ width: '20px', height: '20px' }}>
                <Dynamic component={Icon()} />
            </span>
            <p class={`text-sm font-medium ${textColor()}`}>{props.message}</p>
            <Button
                variant="link"
                onClick={props.onClose}
                class="absolute top-1 right-1 !p-1 !text-gray-500 !shadow-none hover:!text-gray-700"
            >
                <span class={textColor()} style={{ width: '16px', height: '16px' }}>
                    <FaSolidXmark />
                </span>
            </Button>
        </div>
    );
};

export default Notification;