import React from "react"

import { cn } from "../../design-lib/utils"

// Define the properties that can be passed to the Spacer component
interface SpacerProps {
  // Margin Variants
  m?: string | number
  my?: string | number
  mx?: string | number
  mt?: string | number
  mb?: string | number
  ml?: string | number
  mr?: string | number

  // Padding Variants
  p?: string | number
  py?: string | number
  px?: string | number
  pt?: string | number
  pb?: string | number
  pl?: string | number
  pr?: string | number
  debug?: boolean
  className?: string
}

/**
 * Spacer is a reusable component for adding space between elements.
 * It supports various margin and padding options.
 */
const Spacer: React.FC<SpacerProps> = ({
  m,
  my,
  mx,
  mt,
  mb,
  ml,
  mr,
  p,
  py,
  px,
  pt,
  pb,
  pl,
  pr,
  debug,
  className,
}) => {
  // Generate class name based on the passed properties
  const spacerClass = cn(
    m && `m-${m}`,
    my && `my-${my}`,
    mx && `mx-${mx}`,
    mt && `mt-${mt}`,
    mb && `mb-${mb}`,
    ml && `ml-${ml}`,
    mr && `mr-${mr}`,
    p && `p-${p}`,
    py && `py-${py}`,
    px && `px-${px}`,
    pt && `pt-${pt}`,
    pb && `pb-${pb}`,
    pl && `pl-${pl}`,
    pr && `pr-${pr}`,
    debug && "bg-cyan-lighter",
    className
  )

  return <div className={spacerClass}></div>
}

export default Spacer