import { useRef } from 'react';
import cn from 'clsx';
import Image from 'next/image';
import success from '@/assets/success.svg';
import warning from '@/assets/warning.svg';
import { useScrollIntoView } from './useScrollIntoView';

export type AlertProps = {
    text: string;
    isError?: true;
    scrollIntoView?: boolean;
    scrollIntoViewOptions?: ScrollIntoViewOptions;
};

export function Alert(props: AlertProps) {
    const elementRef = useRef<HTMLDivElement>(null);

    useScrollIntoView(
        elementRef,
        props.scrollIntoView,
        props.scrollIntoViewOptions
    );

    return (
        <div
            className="relative flex items-center gap-2.5 rounded-xs p-5 shadow-sm"
            ref={elementRef}
        >
            <div className="absolute left-0 h-full p-1.5">
                <div
                    className={cn([
                        'h-full w-1 grow rounded-sm',
                        props.isError ? 'bg-danger' : 'bg-success',
                    ])}
                />
            </div>
            <Image
                width={24}
                height={24}
                src={props.isError ? warning : success}
                alt=""
            />
            <div>{props.text}</div>
        </div>
    );
}