import * as React from 'react'
import {FC, ComponentPropsWithoutRef} from 'react'

/**
 * @category Props
 * @internal
 */
export interface CornerProps extends ComponentPropsWithoutRef<`div`> {
  size?: string
}

/**
 * A customisable element that can be used to draw a corner of a box.
 *
 * @param props - Regular div attributes plus an optional `size` string. {@link CornerProps}
 * @returns an element compatible with Corners component’s `CornerComponent` prop.
 * @category Components
 */
export const Corner: FC<CornerProps> = ({style = {}, size = `var(--corner-size, .5em)`, ...props}) => {
  return (
    <div
      style={{
        position: `absolute`,
        border: `thin solid currentColor`,
        borderWidth: `thin 0 0 thin`,
        height: size,
        width: size,
        ...style,
      }}
      {...props}
    />
  )
}