import { ReactNode } from 'react';
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
import { faCubesStacked, IconDefinition } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { twMerge } from 'tailwind-merge';

type Props = {
  title: ReactNode;
  className?: string;
  children?: ReactNode;
  icon?: IconDefinition;
  iconSize?: SizeProp;
};

export const EmptyState = ({
  title,
  className,
  children,
  icon = faCubesStacked,
  iconSize = '2x'
}: Props) => (
  <div
    className={twMerge(
      'flex w-full flex-col items-center bg-bunker-700 px-2 pt-6 text-bunker-300',
      className
    )}
  >
    <FontAwesomeIcon icon={icon} size={iconSize} className="mr-4" />
    <div className="flex flex-row items-center py-4">
      <div className="text-sm text-bunker-300">{title}</div>
      <div>{children}</div>
    </div>
  </div>
);
