'use client'

import type { ComponentProps } from 'react'

import type { GDSComponentProps } from '@graphprotocol/gds-css'

import { useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
import { cn, getCSSPropsAttributes } from '../utils/index.ts'
import { DividerMeta } from './Divider.meta.ts'

export interface DividerProps
  extends Omit<ComponentProps<'div'>, 'children'>, GDSComponentProps<typeof DividerMeta> {}

export function Divider({
  ref: passedRef,
  variant,
  orientation,
  className,
  style,
  ...props
}: DividerProps) {
  useGDS()

  const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes, cssProps] = useCSSPropsPolyfill(
    DividerMeta,
    { variant, orientation },
    { ref: passedRef, returnPropValues: { variant, orientation } },
  )

  return (
    <span
      ref={cssPropsPolyfillPassedRef}
      data-variant={cssProps.variant}
      data-orientation={cssProps.orientation}
      className={cn(
        `gds-divider root-flex items-center
        u:data-[variant=default]:text-(--border-color-default)
        u:data-[variant=muted]:text-(--border-color-muted)
        u:data-[variant=strong]:text-(--border-color-strong)
        i:shrink-0
        i:grow-0
        i:data-[orientation=horizontal]:h-px
        i:data-[orientation=vertical]:w-px
        i:data-[orientation=vertical]:flex-col`,
        className,
      )}
      {...getCSSPropsAttributes(DividerMeta, { variant, orientation }, style)}
      {...cssPropsPolyfillAttributes}
      {...props}
    >
      <hr aria-orientation={cssProps.orientation} className="size-full bg-current" />
    </span>
  )
}
