import { cn } from '@/lib/utils/cn'
import React, { HTMLAttributes } from 'react'
interface Props extends React.PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
  sectionClass?: string
  boxClass?: string
  full?: boolean
  elementInsideSection?: React.ReactElement<any>
}

export const Section = React.forwardRef<HTMLDivElement, Props>(
  (
    {
      boxClass,
      sectionClass,
      children,
      full,
      elementInsideSection,
      ...props
    },
    ref,
  ) => {
    return (
      <>
        <section
          ref={ref}
          {...props}
          style={props.style || {}}
          className={cn(
            `sm:section container-padding ${sectionClass || ''}`,
          )}
        >
          {elementInsideSection && elementInsideSection}
          <div className={cn(`sm:box ${boxClass || ''}`)}>{children}</div>
        </section>
      </>
    )
  },
)

Section.displayName = 'Section'
