"use client";

import React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";

const S = 2.5;

export const LampTop = ({
  className,
  lineClassName = "bg-red-500",
  children,
}: {
  className?: string;
  lineClassName?: string;
  children?: React.ReactNode;
}) => {
  return (
    <div
      className={cn(
        "absolute top-0 left-0 right-0 w-full min-h-0 pointer-events-none z-10 flex items-start justify-center",
        className
      )}
    >
      <motion.div
        initial={{ width: `${15 * S}rem` }}
        whileInView={{ width: `${30 * S}rem` }}
        transition={{
          delay: 0.3,
          duration: 0.8,
          ease: "easeInOut",
        }}
        className={cn("absolute top-0 left-1/2 -translate-x-1/2 h-0.5", lineClassName)}
        style={{ width: `${30 * S}rem` }}
      />
      {children}
    </div>
  );
};
