import React from 'react';
import MuiDivider from '@mui/material/Divider';
import type { DividerProps as MuiDividerProps } from '@mui/material/Divider';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Props for the FA Divider component */
export type DividerProps = MuiDividerProps;

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Visual separator for the FA design system.
 *
 * Thin line for separating content sections, navigation groups, or
 * list items. Wraps MUI Divider with FA border tokens.
 *
 * Orientations:
 * - `horizontal` (default) — full-width horizontal line
 * - `vertical` — full-height vertical line (use inside flex containers)
 *
 * Variants:
 * - `fullWidth` (default) — spans the full container
 * - `inset` — indented from the left (for list item separators)
 * - `middle` — indented from both sides
 *
 * Usage:
 * ```tsx
 * <Divider />
 * <Divider orientation="vertical" flexItem />
 * <Divider variant="inset" />
 * ```
 */
export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
  return <MuiDivider ref={ref} {...props} />;
});

Divider.displayName = 'Divider';
export default Divider;