import * as React from 'react'

/**
 *
 * @category Props
 */
export interface BorderProps {
  /**
   * The border-width Hucssley className.
   * @defaultValue
   * The default value is [Hucssley](https://github.com/stowball/hucssley) utility class `border-width:thin` which you can think of as `1px` in CSS, but actually ensures it is as thin as possible if thinner values are supported.
   */
  widthClassName?: string

  /**
   * The colour Hucssley className which will set the border colour.
   * @defaultValue
   * The default value is [Hucssley](https://github.com/stowball/hucssley) utility class `color:neutral-1000`, which is usually black.
   */
  colorClassName?: string
}

/**
 * @internal
 */
export const defaultBorderProps = {
  widthClassName: `border-width:thin border`,
  colorClassName: `color:neutral-1000 text-black`,
}

/**
 * A simple border component that can be used to draw a border around its relative parent, usually the whole template.
 * @param props - `widthClassName` Border width className, default `border-width:thin`. `colorClassName` Colour className, default `color:neutral-1000`.
 * @returns an div with a border which ignores and passed through mouse events.
 *
 * @category Components
 */
export const Border = ({
  //
  widthClassName = defaultBorderProps.widthClassName,
  colorClassName = defaultBorderProps.colorClassName,
  ...props
}: BorderProps) => {
  return (
    <div
      className={`
        ${colorClassName}
        ${widthClassName}
        border-style:solid
        height:100%
        pointer-events:none
        pos-top-left-bottom-right:0
        position:absolute
        width:100%

        w-full
        h-full
        border
        border-solid
        pointer-events-none
        inset-0
        absolute
      `}
      {...props}
    />
  )
}

export default Border