import React from 'react';
import { Icon, IconOptions } from '../Icons/Icon';

interface ResourceState {
  state: 'error' | 'empty';
  message?: string;
  handleReload?: () => void;
  showButton?: boolean;
}

const ResourceState = function ({ state, message, handleReload, showButton = true }: ResourceState) {
  const RetryButton = (
    <button
      type="button"
      onClick={handleReload}
      className="flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 h-9 mt-3 rounded text-md font-bold text-gray-700 py-2 px-3"
    >
      <Icon icon={state === 'empty' ? 'back' : 'retry'} aria-hidden />
      {state === 'empty' ? 'Back to source list' : 'Try again'}
    </button>
  );

  return (
    <div className="squiz-gb-scope flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
      <Icon icon={state as IconOptions} aria-hidden />
      {/* Message */}
      <span className="text-md text-gray-800 font-semibold leading-5">
        {state === 'empty' ? 'There are no items to display' : message}
      </span>
      {/* Retry button */}
      {showButton && RetryButton}
    </div>
  );
};

export { ResourceState };