import * as React from 'react'
import {FC, ComponentType, HTMLAttributes} from 'react'

/**
 * @category Props
 */
export interface GridItemProps extends HTMLAttributes<HTMLOrSVGElement> {
  /**
   * Allows setting the underlying HTML element
   * @defaultValue `div`
   */
  tag?: ComponentType | keyof JSX.IntrinsicElements
}

/**
 * This component is intended to be used as children of `display:grid` elements — particularly when those elements define complex `grid-template-areas`.
 *
 * @remarks
 * The purpose of this component is to encapsulate some fixes for common "gotchyas" often encountered when using complex `display:grid`, such as [grid blowouts](https://css-tricks.com/preventing-a-grid-blowout/). You can think of it as merely providing a few sensible default styles for such grid items, and otherwise just behaving like any regular wrapper element. The underlying element type can be changed via the `tag` prop, if required, and all other props you apply will be passed on to that element.
 *
 * @param props - the {@link GridItemProps}. You can use the `tag` prop to change the element type. You can also add any attribute that would be valid on that element type you choose.
 * @returns a spicy div for use as a grid item.
 * @category Components
 *
 * @example
 * ```jsx
 * <div
 *  className={`@mq-min-aspect-1/1--grid-template-areas:var-1`}
 *  style={{
 *    '--grid-template-areas-var-1': `
 *      " ◤   —   ◥ "
 *      " l   🐄   ▍"
 *      " l   📝   ▍"
 *      " ◣   ▂   ◢ "
 *    `
 *  }}
 * >
 *   <GridItem>
 *     <p>
 *       I’m some content which could be affected by grid blowout
 *       if it weren’t for my lovely ❤️❤️❤️ GridItem parent ❤️❤️❤️.
 *     </p>
 *   </GridItem>
 * </div>
 * ```
 */
export const GridItem: FC<GridItemProps> = ({children, className = ``, tag: Tag = `div`, ...props}) => {
  return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    <Tag
      {...props}
      className={`
        min-height:0
        min-width:0
        position:relative
        justify-self:stretch
        align-self:stretch

        min-h-0
        min-w-0
        relative
        justify-self-stretch
        items-stretch
        ${className}
      `}
    >
      {children}
    </Tag>
  )
}

export default GridItem