import IconSkeleton from '@/components/helper/skeleton/IconSkeleton';

const DataStateSkeleton = ({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode;
  title: string;
  description: string;
}) => {
  return (
    <div className='flex flex-col items-center justify-center'>
      <IconSkeleton
        className={{
          outer: 'mb-2.25',
        }}
      >
        {icon}
      </IconSkeleton>
      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
        {title}
      </h3>
      <p className='text-base-content/50 text-xs text-center max-w-xs'>
        {description}
      </p>
    </div>
  );
};

export default DataStateSkeleton;