import React from "react";
import { Link } from "@arc-ui/components/Link";
import { Icon } from "@arc-ui/components/Icon";
import { Heading } from "@arc-ui/components/Heading";
import { BtIconArrowAltRight } from "@arc-ui/icons/BtIconArrowAltRight";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
import styles from "./InlineLinkGroup.module.css";

export const InlineLinkGroup: React.FC<InlineLinkGroupProps> = ({
  label,
  headingLevel = "2",
  links,
  ...props
}) => {
  return (
    <div className={styles["quick-help"]} {...filterAttrs(props)}>
      {label && (
        <div className={styles["quick-help-label"]}>
          <Heading level={headingLevel} size="xxs" fontStyle="overline">
            {label}
          </Heading>
        </div>
      )}

      <ul className={styles["quick-help-container"]}>
        {links.map((link, index) => (
          <React.Fragment key={index}>
            <li className={styles["quick-help-item"]}>
              <Link
                href={link.href}
                onClick={link.onClick}
                aria-label={link.ariaLabel}
              >
                {link.label}
              </Link>

              <Icon icon={BtIconArrowAltRight} size={24} color="brand" />
            </li>

            {index < links.length - 1 && (
              <li className={styles["quick-help-separator"]} aria-hidden="true">
                <div className={styles["quick-help-separator-line"]} />
              </li>
            )}
          </React.Fragment>
        ))}
      </ul>
    </div>
  );
};

export interface InlineLinkGroupProps {
  /** Optional overline label displayed above the link group */
  label?: string;
  /** Heading level for the label, defaults to "2" for proper heading hierarchy */
  headingLevel?: "1" | "2" | "3" | "4" | "5" | "6";
  /** Array of link items to display */
  links: InlineLinkGroupItem[];
}

export interface InlineLinkGroupItem {
  /** Display text for the link */
  label: string;
  /** URL the link navigates to */
  href: string;
  /** Optional click handler for the link */
  onClick?: () => void;
  /** Optional accessible label for screen readers */
  ariaLabel?: string;
}