lti-web-client/src/components/pages/closing/skeleton/FinanceClosingSkeleton.tsx

import { Icon } from '@iconify/react';
import Card from '@/components/Card';
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';

const FinanceClosingSkeleton = ({
  title = 'Data Keuangan Belum Tersedia',
  subtitle = 'Tidak ada data keuangan untuk periode ini.',
  iconName = 'heroicons:chart-bar',
}: {
  title?: string;
  subtitle?: string;
  iconName?: string;
}) => {
  return (
    <Card
      variant='bordered'
      className={{
        wrapper: 'w-full',
        body: 'p-8',
      }}
    >
      <div className='flex items-center justify-center p-8'>
        <DataStateSkeleton
          icon={
            <Icon
              icon={iconName}
              className='text-white'
              width={20}
              height={20}
            />
          }
          title={title}
          description={subtitle}
        />
      </div>
    </Card>
  );
};

export default FinanceClosingSkeleton;