// components/Skeleton/SkeletonCard.tsx
"use client";

import React from "react";

interface SkeletonCardProps {
  className?: string;
}

export const SkeletonCard: React.FC<SkeletonCardProps> = ({ className = "" }) => {
  return (
    <div className={`bg-white p-4 rounded-lg shadow-sm border flex flex-col gap-3 animate-pulse ${className}`}>
      <div className="flex justify-between items-center">
        <div className="p-2 rounded-lg bg-gray-200 w-10 h-10"></div>
        <div className="bg-gray-200 rounded-full w-16 h-6"></div>
      </div>
      <div>
        <div className="h-3 bg-gray-200 rounded w-3/4 mb-2"></div>
        <div className="h-6 bg-gray-200 rounded w-1/2 mb-1"></div>
        <div className="h-3 bg-gray-200 rounded w-2/3"></div>
      </div>
    </div>
  );
};

// components/Skeleton/SkeletonChart.tsx
export const SkeletonChart: React.FC = () => {
  return (
    <div className="bg-white rounded-xl shadow p-4 animate-pulse">
      <div className="flex justify-between items-center mb-3">
        <div className="h-4 bg-gray-200 rounded w-1/3"></div>
        <div className="h-4 bg-gray-200 rounded w-24"></div>
      </div>
      <div className="h-[260px] bg-gray-100 rounded-lg"></div>
      <div className="flex justify-center gap-6 mt-3">
        <div className="h-3 bg-gray-200 rounded w-24"></div>
        <div className="h-3 bg-gray-200 rounded w-24"></div>
        <div className="h-3 bg-gray-200 rounded w-24"></div>
      </div>
    </div>
  );
};

// components/Skeleton/SkeletonAttendance.tsx
export const SkeletonAttendance: React.FC = () => {
  return (
    <div className="bg-white rounded-xl shadow p-4 space-y-4 animate-pulse">
      <div className="h-4 bg-gray-200 rounded w-1/3"></div>
      <div>
        <div className="flex justify-between gap-3 mb-4">
          <div className="h-4 bg-gray-200 rounded w-1/2"></div>
          <div className="h-6 bg-gray-200 rounded-full w-24"></div>
        </div>
        <div className="grid grid-cols-2 gap-3 my-4">
          <div className="bg-gray-100 rounded-lg p-2 h-16"></div>
          <div className="bg-gray-100 rounded-lg p-2 h-16"></div>
        </div>
        <div className="w-full h-2 bg-gray-200 rounded mt-2"></div>
      </div>
      <div className="bg-gray-100 p-4 rounded-lg h-20"></div>
    </div>
  );
};

// components/Skeleton/SkeletonList.tsx
interface SkeletonListProps {
  count?: number;
}

export const SkeletonList: React.FC<SkeletonListProps> = ({ count = 5 }) => {
  return (
    <div className="bg-white rounded-xl shadow p-4 animate-pulse">
      <div className="flex items-center justify-between gap-5 mb-5">
        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
        <div className="h-4 bg-gray-200 rounded w-16"></div>
      </div>
      <div className="space-y-3">
        {[...Array(count)].map((_, i) => (
          <div key={i} className="flex justify-between items-center border-b pb-2">
            <div className="flex items-center gap-2">
              <div className="bg-gray-200 rounded-lg p-2 w-10 h-10"></div>
              <div>
                <div className="h-4 bg-gray-200 rounded w-24 mb-1"></div>
                <div className="h-3 bg-gray-200 rounded w-32"></div>
              </div>
            </div>
            <div className="flex flex-col gap-0 items-end">
              <div className="h-4 bg-gray-200 rounded w-20 mb-1"></div>
              <div className="h-3 bg-gray-200 rounded w-16"></div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// components/Skeleton/SkeletonTable.tsx
export const SkeletonTable: React.FC = () => {
  return (
    <div className="animate-pulse">
      <div className="grid grid-cols-[2.2fr_1fr_1fr_1.2fr] px-6 py-4 border-b border-gray-200">
        {[...Array(4)].map((_, i) => (
          <div key={i} className="h-3 bg-gray-200 rounded w-3/4"></div>
        ))}
      </div>
      {[...Array(6)].map((_, i) => (
        <div key={i} className="grid grid-cols-[2.2fr_1fr_1fr_1.2fr] items-center px-6 py-6 border-b border-gray-200">
          <div className="flex items-center gap-3">
            <div className="w-2.5 h-2.5 rounded-full bg-gray-200"></div>
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
          </div>
          <div className="flex justify-center">
            <div className="h-4 bg-gray-200 rounded w-16"></div>
          </div>
          <div className="flex justify-center">
            <div className="h-4 bg-gray-200 rounded w-16"></div>
          </div>
          <div className="flex justify-end">
            <div className="h-4 bg-gray-200 rounded w-24"></div>
          </div>
        </div>
      ))}
    </div>
  );
};