import clsx from 'clsx';

import { LOADING_SHIMMER_ANIMATION } from '@/utils/constants';

export const ClipLineageImageSkeleton = () => {
  return (
    <div
      className={clsx(
        'h-[41px] w-[30px] rounded bg-quaternary',
        LOADING_SHIMMER_ANIMATION
      )}
    />
  );
};

export const ClipLineageSkeleton = ({ label }: { label: string }) => {
  return (
    <div className='flex flex-row items-center'>
      <ClipLineageImageSkeleton />
      <div className='flex flex-col justify-center pl-3'>
        <div className='font-sans text-[14px] leading-[16px] font-semibold'>
          {label}
        </div>
        <div
          className={clsx(
            'h-4 w-28 rounded bg-quaternary',
            LOADING_SHIMMER_ANIMATION
          )}
        />
      </div>
    </div>
  );
};