import * as React from 'react'
import {Corner} from './Corner'

/**
 * This component renders its CornerComponent four times, once for each corner, rotating the element an additional 90 degrees each time.
 *
 * @param props - CornerComponent prop allows you to supply a custom element for use in the corners.
 * @returns a fragment containing four CornerComponents.
 * @category Components
 */
export const Corners = ({CornerComponent = Corner}) => {
  return (
    <>
      <CornerComponent
        style={{
          top: 0,
          left: 0,
        }}
      />
      <CornerComponent
        style={{
          top: 0,
          right: 0,
          transform: `rotate(90deg)`,
        }}
      />
      <CornerComponent
        style={{
          bottom: 0,
          right: 0,
          transform: `rotate(180deg)`,
        }}
      />
      <CornerComponent
        style={{
          bottom: 0,
          left: 0,
          transform: `rotate(270deg)`,
        }}
      />
    </>
  )
}

export default Corners