'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 { StatusMeta } from './Status.meta.ts'

export interface StatusProps extends ComponentProps<'span'>, GDSComponentProps<typeof StatusMeta> {}

export function Status({
  ref: passedRef,
  variant,
  size,
  className,
  style,
  children,
  ...props
}: StatusProps) {
  useGDS()

  const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(
    StatusMeta,
    { variant, size },
    { ref: passedRef },
  )

  return (
    <span
      ref={cssPropsPolyfillPassedRef}
      className={cn('gds-status root-flex items-center gap-1 u:w-max u:max-w-full', className)}
      {...getCSSPropsAttributes(StatusMeta, { variant, size }, style)}
      {...cssPropsPolyfillAttributes}
      {...props}
    >
      <span
        className={`
          flex shrink-0 items-center justify-center
          @prop-size-small/status:size-3
          @prop-size-medium/status:size-4
          @prop-size-large/status:size-5
        `}
      >
        <span
          className={`
            rounded-full
            @prop-variant-default/status:bg-strong
            @prop-variant-brand/status:bg-brand-default
            @prop-variant-info/status:bg-status-info-default
            @prop-variant-success/status:bg-status-success-default
            @prop-variant-warning/status:bg-status-warning-default
            @prop-variant-error/status:bg-status-error-default
            @prop-size-small/status:size-2
            @prop-size-medium/status:size-2.5
            @prop-size-large/status:size-3
          `}
        />
      </span>
      {children ? (
        <span
          className={`
            truncate text-default
            @prop-size-small/status:text-12
            @prop-size-medium/status:text-14
            @prop-size-large/status:text-16
          `}
        >
          {children}
        </span>
      ) : null}
    </span>
  )
}
