"use client";

import { motion } from "framer-motion";

interface SplashLoaderProps {
  duration: number; // seconds
}

export default function SplashLoader({ duration }: SplashLoaderProps) {
  return (
    <motion.div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: "1rem",
        width: "100%",
        maxWidth: 220,
      }}
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 1.4, duration: 0.5, ease: "easeOut" }}
    >
      {/* Progress bar track */}
      <div
        style={{
          width: "100%",
          height: 3,
          borderRadius: 99,
          overflow: "hidden",
          background: "var(--border, #E5E7EB)",
        }}
      >
        <motion.div
          style={{
            height: "100%",
            borderRadius: 99,
            position: "relative",
            overflow: "hidden",
            background: "linear-gradient(90deg, var(--brand-hover, #ED2027), var(--brand, #C1272D))",
          }}
          initial={{ width: "0%" }}
          animate={{ width: "100%" }}
          transition={{ delay: 1.4, duration, ease: "easeInOut" }}
        >
          {/* Shimmer */}
          <motion.div
            style={{
              position: "absolute",
              inset: 0,
              background:
                "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%)",
            }}
            animate={{ x: ["-100%", "200%"] }}
            transition={{ duration: 1.1, repeat: Infinity, ease: "easeInOut", repeatDelay: 0.4 }}
          />
        </motion.div>
      </div>

      {/* Staggered dots */}
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        {[0, 1, 2].map((i) => (
          <motion.div
            key={i}
            style={{
              width: 5,
              height: 5,
              borderRadius: "50%",
              background: "var(--brand, #C1272D)",
            }}
            animate={{ opacity: [0.3, 1, 0.3], scale: [0.85, 1, 0.85] }}
            transition={{ duration: 1, repeat: Infinity, ease: "easeInOut", delay: i * 0.2 }}
          />
        ))}
      </div>
    </motion.div>
  );
}