import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
import { usePlatformLanguage } from "../i18n/LanguageContext";

export type SelectionListProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "role"> & {
  children: ReactNode;
  label?: string;
};

export type SelectionListItemProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  "aria-selected" | "children" | "role"
> & {
  children: ReactNode;
  selected: boolean;
};

export default function SelectionList({
  "aria-label": ariaLabel,
  children,
  className = "",
  label,
  ...props
}: SelectionListProps) {
  const { translateText } = usePlatformLanguage();
  const rootClassName = ["selection-list", className].filter(Boolean).join(" ");

  return (
    <div
      {...props}
      className={rootClassName}
      role="listbox"
      aria-label={label ? translateText(label) : ariaLabel}
    >
      {children}
    </div>
  );
}

export function SelectionListItem({
  children,
  className = "",
  disabled = false,
  selected,
  type = "button",
  ...props
}: SelectionListItemProps) {
  const itemClassName = [
    "selection-list-item",
    selected ? "is-selected" : "",
    disabled ? "is-disabled" : "",
    className
  ].filter(Boolean).join(" ");

  return (
    <button
      {...props}
      type={type}
      role="option"
      aria-selected={selected}
      aria-disabled={disabled || undefined}
      className={itemClassName}
      disabled={disabled}
    >
      {children}
    </button>
  );
}