Divider Gradient Blur

"use client";

import { motion } from "framer-motion";

interface DividerGradientBlurProps {
  height?: number;
}

export default function DividerGradientBlur({
  height = 60,
}: DividerGradientBlurProps) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
      style={{
        position: "relative",
        width: "100%",
        height,
        overflow: "hidden",
      }}
    >
      {/* Base gradient background */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "linear-gradient(90deg, var(--color-background) 0%, var(--color-accent) 25%, var(--color-background-alt) 50%, var(--color-accent) 75%, var(--color-background) 100%)",
          opacity: 0.3,
        }}
      />

      {/* Blur overlay */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          backdropFilter: "blur(24px)",
          background: "color-mix(in srgb, var(--color-background) 60%, transparent)",
        }}
      />

      {/* Top fade */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: "40%",
          background: "linear-gradient(to bottom, var(--color-background), transparent)",
          zIndex: 1,
        }}
      />

      {/* Bottom fade */}
      <div
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          height: "40%",
          background: "linear-gradient(to top, var(--color-background), transparent)",
          zIndex: 1,
        }}
      />

      {/* Center accent line */}
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "10%",
          right: "10%",
          height: "1px",
          background: "linear-gradient(90deg, transparent, var(--color-accent), transparent)",
          opacity: 0.5,
          transform: "translateY(-50%)",
          zIndex: 2,
        }}
      />
    </motion.div>
  );
}