"use client";

import { motion } from "framer-motion";

interface SplashLoaderProps {
  duration?: number;
  isDark?: boolean;
}

export function SplashLoader({ duration = 2.6, isDark = true }: SplashLoaderProps) {
  return (
    <div className="flex flex-col items-center gap-4">
      {/* Progress bar track */}
      <div
        style={{
          width: 160,
          height: 2,
          borderRadius: 2,
          background: isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.10)",
          overflow: "hidden",
          position: "relative",
        }}
      >
        {/* Fill bar */}
        <motion.div
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: 2,
            background: "linear-gradient(90deg, var(--accent-dark), var(--accent), #ff9a40)",
            boxShadow: "0 0 10px rgba(var(--accent-rgb),0.7)",
            transformOrigin: "left center",
          }}
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{
            duration,
            ease: [0.1, 0.4, 0.8, 1],
            delay: 0.8,
          }}
        />

        {/* Shimmer sweep */}
        <motion.div
          style={{
            position: "absolute",
            top: 0,
            bottom: 0,
            width: 40,
            background:
              "linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent)",
            borderRadius: 2,
          }}
          animate={{ x: [-40, 200] }}
          transition={{
            duration: 1.2,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 1.0,
          }}
        />
      </div>

      {/* Dot indicators */}
      <div className="flex gap-1.5">
        {[0, 1, 2].map((i) => (
          <motion.div
            key={i}
            style={{
              width: 4,
              height: 4,
              borderRadius: "50%",
              background: "var(--accent)",
            }}
            animate={{
              opacity: [0.25, 1, 0.25],
              scale: [0.8, 1.2, 0.8],
            }}
            transition={{
              duration: 1,
              repeat: Infinity,
              delay: i * 0.22,
              ease: "easeInOut",
            }}
          />
        ))}
      </div>
    </div>
  );
}