import React from 'react';

import type { StatusIndicatorStateName, StatusIndicatorVariant } from '@shoptet/ui-core-web';
import type { SafeOmit } from '@shoptet/utils';

import { SHAPE_GEOMETRY, shapeForState } from './StatusIndicatorGeometry';

export interface StatusIndicatorShapeProps extends SafeOmit<
  React.ComponentProps<'svg'>,
  'children' | 'className' | 'aria-hidden' | 'role'
> {
  state: StatusIndicatorStateName;
  variant: StatusIndicatorVariant;
  /** Icon-font glyph character (resolve via `iconGlyphChar`). When omitted, no glyph is drawn. */
  symbolChar?: string;
}

/** Decorative inline SVG, always `aria-hidden`; the accessible name lives on the indicator root. */
export function StatusIndicatorShape({ state, variant, symbolChar, ...rest }: StatusIndicatorShapeProps) {
  return (
    <svg {...rest} aria-hidden className='status-indicator__shape' preserveAspectRatio='none' viewBox='0 0 20 20'>
      {SHAPE_GEOMETRY[variant][shapeForState(state)]}
      {symbolChar !== undefined && (
        <text className='status-indicator__symbol' x='10' y='10' textAnchor='middle' dominantBaseline='central'>
          {symbolChar}
        </text>
      )}
    </svg>
  );
}