import { Icon } from '@iconify/react';

const UniformityTableSkeleton = () => {
  return (
    <div className='flex flex-col items-center justify-center my-20'>
      {/* Document icon */}
      <div className='mb-2'>
        <div className='w-12.5 h-12.5 bg-(--main-color-base-100,#FFFFFF) border border-base-content/10 rounded-[0.875rem] shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center'>
          <div className='w-9.5 h-9.5 bg-primary rounded-lg border border-primary flex items-center justify-center shadow-[inset_0px_4px_4px_0px_#FFFFFF80,inset_0px_2px_0px_0px_#FFFFFF80]'>
            <Icon
              icon='heroicons:document-text'
              className='text-white'
              width={20}
              height={20}
            />
          </div>
        </div>
      </div>

      {/* Empty state text */}
      <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
        No Data Available
      </h3>
      <p className='text-base-content/50 text-xs text-center max-w-xs'>
        There is no uniformity data displayed. Enter uniformity check data to
        get started.
      </p>
    </div>
  );
};

export default UniformityTableSkeleton;
