interface ErrorStateProps {
  title?: string;
  message: string;
  onRetry?: () => void;
}

export function ErrorState({ title = 'Something went wrong', message, onRetry }: ErrorStateProps): JSX.Element {
  return (
    <div
      role="alert"
      data-testid="error-state"
      className="card-product border-l-4 border-l-bloom-deep flex flex-col items-start gap-md"
    >
      <h2 className="text-[24px] font-medium text-bloom-deep">{title}</h2>
      <p className="text-[16px] text-charcoal">{message}</p>
      {onRetry ? (
        <button type="button" className="btn-outline" onClick={onRetry}>
          Retry
        </button>
      ) : null}
    </div>
  );
}