interface ShimmerLoaderProps {
  className?: string
  style?: React.CSSProperties
}

export const ShimmerLoader: React.FC<ShimmerLoaderProps> = ({
  className = '',
  style,
}) => {
  return (
    <div
      className={`animate-pulse bg-linear-to-r from-gray-200 via-gray-300 to-gray-200 bg-size-[200%_100%] rounded ${className}`}
      style={{
        animation:
          'shimmer 1.5s ease-in-out infinite, pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        ...style,
      }}
    />
  )
}

export const CardStatsLoader: React.FC = () => {
  return (
    <div className="bg-white border p-6 px-8 rounded border-slate-200">
      <div className="flex items-center gap-2">
        <ShimmerLoader className="w-10 h-10 rounded-full" />
        <ShimmerLoader className="h-4 w-24" />
      </div>

      <div className="mt-5">
        <ShimmerLoader className="h-8 w-20 mb-2" />
        <ShimmerLoader className="h-3 w-32" />
      </div>
    </div>
  )
}

export const AchievementLevelCardLoader: React.FC = () => {
  return (
    <div className="bg-white border border-slate-200 rounded p-6">
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <ShimmerLoader className="w-7 h-7 rounded" />
        <ShimmerLoader className="h-5 w-36" />
      </div>

      {/* Current Level & Discount Rate */}
      <div className="flex justify-between items-start mb-6">
        <div>
          <ShimmerLoader className="h-3 w-20 mb-2" />
          <ShimmerLoader className="h-7 w-16" />
        </div>
        <div className="text-right">
          <ShimmerLoader className="h-3 w-24 mb-2" />
          <ShimmerLoader className="h-7 w-12 ml-auto" />
        </div>
      </div>

      {/* Progress Bar */}
      <div className="mb-6">
        <div className="flex justify-between items-center mb-2">
          <ShimmerLoader className="h-3 w-28" />
          <ShimmerLoader className="h-3 w-8" />
        </div>
        <ShimmerLoader className="w-full h-2.5 rounded-full" />
        <div className="flex justify-between items-center mt-2">
          <ShimmerLoader className="h-3 w-20" />
          <ShimmerLoader className="h-3 w-28" />
        </div>
      </div>

      {/* Next Level Benefits */}
      <div className="border border-slate-200 rounded p-4">
        <ShimmerLoader className="h-3 w-28 mb-3" />
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <ShimmerLoader className="w-5 h-5 rounded" />
            <ShimmerLoader className="h-4 w-12" />
          </div>
          <ShimmerLoader className="h-5 w-10" />
        </div>
      </div>
    </div>
  )
}

export const BarChartLoader: React.FC<{ className?: string }> = ({
  className = '',
}) => {
  const barHeights = ['40%', '60%', '80%', '50%', '70%', '45%']

  return (
    <div
      className={`bg-white border border-slate-200 rounded p-6 ${className}`}
    >
      <div className="mb-4">
        <ShimmerLoader className="w-24 h-4" />
      </div>
      <div className="flex items-end justify-between h-64 gap-2">
        {barHeights.map((height, index) => (
          <ShimmerLoader
            key={index}
            className="w-12 rounded-t"
            style={{ height }}
          />
        ))}
      </div>
    </div>
  )
}