Lamp

"use client"

import { motion } from "framer-motion"

import { LampContainer } from "@/components/ui/lamp"

const settings = {
  reverse: false,
  color: "#9EFF96",
  headline:
    "Some ideas sit quietly in the dark, waiting, unfinished, unsure of their own shape, until one light finds them, holds them still, and lets them speak for themselves.",
}

export default function LampDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }

  return (
    <LampContainer reverse={s.reverse} color={s.color}>
      <motion.h1
        initial={{ opacity: 0.08, x: s.reverse ? -60 : 600 }}
        whileInView={{ opacity: 1, x: 0 }}
        transition={{
          delay: 0.2,
          duration: 1.6,
          ease: [0.16, 1, 0.3, 1],
        }}
        className={
          "max-w-[400px] bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-lg font-medium leading-snug tracking-tight text-transparent md:text-2xl " +
          (s.reverse ? "text-right" : "text-left")
        }
      >
        {s.headline}
      </motion.h1>
    </LampContainer>
  )
}