'use client'
import React from 'react'
import { Text } from './text'
import { cn } from '@/lib/utils'
import { StaggeredFade } from './staggered-fade'
import { motion } from 'motion/react'
const fadeUp = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] as const } },
}
const viewportConfig = { once: false, amount: 0.2 }
interface SectionLabelProps {
  label: string
  title?: React.ReactNode
  description?: string
  titleClassName?: string
  descriptionClassName?: string
  textclass?: string
  labelclass?: string
  className?: string
}
export const SectionLabel = ({ labelclass, label, title, description, titleClassName, descriptionClassName, textclass, className }: SectionLabelProps) => (
  <div className={cn('space-y-5', className)}>
    <div
      className={cn('flex gap-3 items-center w-max border-b border-[#DFDFDF] pb-[15px] md:pb-5', labelclass)}
    >
      <div className='bg-secondary size-2.5 rounded-full' />
      <StaggeredFade text={label} className={cn('text-accent max-w-[31rem] text-sm', textclass)} />
    </div>
    {
      title && (
        <div className='space-y-5' >
          <motion.div variants={fadeUp} initial='hidden' whileInView='visible' viewport={viewportConfig} custom={0}>
            <Text size='h2' className={cn('uppercase max-w-[57rem] leading-[45px] xl:leading-[60px] 2xl:leading-[68px]', titleClassName, textclass)}>{title}</Text>
          </motion.div>
          <motion.div variants={fadeUp} initial='hidden' whileInView='visible' viewport={viewportConfig} custom={0.3}>
            {description && (
              <Text size='normal' className={cn('text-accent max-w-[64rem]', descriptionClassName, textclass)} textKey={description} />
            )}
          </motion.div>
        </div>
      )
    }
  </div>
)