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-lg shadow-sm border border-gray-200 p-6 relative'>
      {/* Header with title skeleton */}
      <div className='text-lg font-semibold'>
        Performance{' '}
        <Icon
          icon='heroicons:information-circle'
          width={20}
          height={20}
          className='inline text-neutral-500'
        />
      </div>

      {/* Chart area with axes skeleton */}
      <div className='relative mt-6'>
        {/* Main chart container */}
        <div className='flex gap-4'>
          {/* Y-axis skeleton (left side) */}
          <div className='flex flex-col justify-between py-4 space-y-4'>
            {[1, 2, 3, 4, 5, 6].map((item) => (
              <div
                key={item}
                className='h-4 w-12 bg-gray-100 rounded animate-pulse'
              ></div>
            ))}
          </div>

          {/* 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-12'>
              {!meta?.filters && (
                <>
                  {/* Filter icon */}
                  <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
                    <Icon
                      icon='heroicons:funnel'
                      className='text-white'
                      width={24}
                      height={24}
                    />
                  </div>

                  {/* Empty state text */}
                  <h3 className='text-gray-900 font-semibold text-base mb-2'>
                    No Filters Selected
                  </h3>
                  <p className='text-gray-500 text-sm 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 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
                    <Icon
                      icon='heroicons:chart-bar'
                      className='text-white'
                      width={24}
                      height={24}
                    />
                  </div>

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

            {/* Placeholder for chart height */}
            <div className='h-64'></div>

            {/* X-axis skeleton (bottom) */}
            <div className='flex justify-between pt-4 border-t border-gray-100'>
              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
                <div
                  key={item}
                  className='h-4 w-8 bg-gray-100 rounded animate-pulse'
                ></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DashboardLineChartSkeleton;