import React from 'react';
import { Icon, IconOptions, ResetButton } from '@squiz/generic-browser-lib';

export type ErrorStateProps = {
    error: Error;
    isDisabled?: boolean;
    onClear: () => void;
};

export const ErrorState = ({ error, isDisabled, onClear }: ErrorStateProps) => (
    <>
        <Icon icon={'error' as IconOptions} aria-hidden className="resource-picker__error-icon w-6 h-6 text-red-300" />
        <div className="resource-picker__error-message text-red-300 w-full">{error.message}</div>
        <ResetButton isDisabled={isDisabled} onClick={onClear} />
    </>
);