export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
  return (
    <>
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          style={{
            width: width || "100%",
            height: height || "60px",
            backgroundColor: "var(--secondary-alt-bg)",
            borderRadius: "8px",
            animation: "shimmer 1.5s infinite",
            marginBottom: count > 1 ? "1rem" : undefined
          }}
        ></div>
      ))}
      <style>{`
        @keyframes shimmer {
          0%, 100% { opacity: 0.5; }
          50% { opacity: 1; }
        }
      `}</style>
    </>
  );
}

export function CardSkeleton() {
  return (
    <div
      style={{
        backgroundColor: "var(--secondary-alt-bg)",
        border: "1px solid var(--border-color)",
        borderRadius: "5px",
        padding: "10px",
        minHeight: "80px"
      }}
    >
      <div
        style={{
          width: "60%",
          height: "20px",
          backgroundColor: "var(--tertiary-bg)",
          borderRadius: "4px",
          marginBottom: "0.5rem",
          animation: "shimmer 1.5s infinite"
        }}
      ></div>
      <div
        style={{
          width: "40%",
          height: "16px",
          backgroundColor: "var(--tertiary-bg)",
          borderRadius: "4px",
          animation: "shimmer 1.5s infinite 0.2s"
        }}
      ></div>
      <style>{`
        @keyframes shimmer {
          0%, 100% { opacity: 0.5; }
          50% { opacity: 1; }
        }
      `}</style>
    </div>
  );
}