import React from 'react';
import MuiLink from '@mui/material/Link';
import type { LinkProps as MuiLinkProps } from '@mui/material/Link';

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

/** Props for the FA Link component */
export type LinkProps = MuiLinkProps;

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

/**
 * Navigation text link for the FA design system.
 *
 * Inline or standalone text link with FA brand styling — copper colour
 * (brand.600) for WCAG AA compliance on white backgrounds. Underline
 * appears on hover by default.
 *
 * Wraps MUI Link with FA theme tokens. Uses `color.text.brand`
 * (#B0610F, 4.8:1 contrast ratio on white).
 *
 * Usage:
 * ```tsx
 * <Link href="/faq">Frequently Asked Questions</Link>
 * <Link href="/contact" color="text.secondary">Contact Us</Link>
 * ```
 *
 * For button-styled links, use `Button` with `component="a"` and `href`.
 * For navigation menu items, use Link with `underline="none"`.
 */
export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
  return <MuiLink ref={ref} {...props} />;
});

Link.displayName = 'Link';
export default Link;