import * as React from 'react';
import { clsx } from 'clsx';

export interface ListItemButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  selected?: boolean;
}

export const ListItemButton = React.forwardRef<HTMLButtonElement, ListItemButtonProps>(
  ({ selected, className, children, ...props }, ref) => (
    <button
      ref={ref}
      type="button"
      aria-pressed={selected}
      className={clsx(
        'w-full rounded-md border p-3 text-left transition-colors',
        'border-[var(--bl-border)] bg-[var(--bl-surface-muted)] text-[var(--bl-text-primary)]',
        'hover:border-[var(--bl-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bl-accent)]',
        selected && 'border-[var(--bl-accent)] bg-[var(--bl-accent-muted,var(--bl-surface-card))]',
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
);

ListItemButton.displayName = 'ListItemButton';
