lti-web-client/src/components/pages/dashboard/skeleton/DashboardLineChartSkeleton.tsx

import { Icon } from '@iconify/react';
import { DashboardMeta } from '@/types/api/dashboard/dashboard';

const DashboardLineChartSkeleton = ({ meta }: { meta?: DashboardMeta }) => {
  return (
    <div className='w-full bg-white rounded-xl border border-base-content/10 p-4 relative'>
      {/* Header with title skeleton */}
      <div className='text-base font-semibold'>
        Performance{' '}
        <Icon
          icon='heroicons:information-circle'
          width={20}
          height={20}
          className='inline text-base-content/50'
        />
      </div>

      {/* Chart area with axes skeleton */}
      <div className='relative mt-6 '>
        {/* Chart content area */}
        <div className='flex-1 relative'>
          {/* Empty state centered in chart area */}
          <div className='absolute inset-0 flex flex-col items-center justify-center pb-10'>
            {!meta?.filters && (
              <>
                {/* Filter icon */}
                <div className='mb-2'>
                  <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content 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:funnel'
                        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 Filters Selected
                </h3>
                <p className='text-base-content/50 text-xs text-center max-w-xs'>
                  Please choose filters to narrow down your results and make
                  your search easier.
                </p>
              </>
            )}
            {meta?.filters && (
              <>
                {/* Filter icon */}
                <div className='w-12.5 h-12.5 bg-[var(--main-color-base-100,#FFFFFF)] border border-base-content/10 rounded-[3.5rem] border border-base-content shadow-[0px_25px_50px_-12px_#00000040] flex items-center justify-center mb-2'>
                  <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:chart-bar'
                      className='text-white'
                      width={20}
                      height={20}
                    />
                  </div>
                </div>

                {/* Empty state text */}
                <h3 className='text-base-content/50 font-semibold text-sm mb-1'>
                  Data Not Yet Available
                </h3>
                <p className='text-base-content/50 text-xs text-center max-w-xs'>
                  Please change your filters to get the data.
                </p>
              </>
            )}
          </div>

          <div className='flex flex-row w-full items-center gap-4'>
            <div className='flex-1 h-full min-w-4'>
              <div className='h-28.5 w-4 bg-base-content/4 rounded'></div>
            </div>
            <div className='w-full grid grid-cols-1 gap-y-13.25 mb-2'>
              {[1, 2, 3, 4].map((item) => (
                <div key={item} className='flex items-center w-full h-4 gap-4'>
                  <div className='h-4 w-6 bg-base-content/4 rounded'></div>
                  <div className='h-0.25 w-full bg-base-content/4 rounded'></div>
                </div>
              ))}
            </div>
          </div>

          {/* X-axis skeleton (bottom) */}
          <div className='grid grid-cols-10 gap-15 mt-4 ps-13 sm:ps-26 overflow-x-hidden'>
            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
              <div
                key={item}
                className='h-4 w-9.5 bg-base-content/4 rounded'
              ></div>
            ))}
          </div>
          <div className='flex justify-center pt-4 ps-13 sm:ps-26'>
            <div className='h-4 w-28.5 bg-base-content/4 rounded'></div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DashboardLineChartSkeleton;