import React, { ReactNode } from 'react';
import { Icon, IconSrc, Text } from 'folds';
import * as css from './SettingsNav.css';

type SettingsNavItemProps = {
  icon: IconSrc;
  label: string;
  active: boolean;
  onClick: () => void;
};
export function SettingsNavItem({ icon, label, active, onClick }: SettingsNavItemProps) {
  return (
    <button type="button" className={css.NavItem} aria-pressed={active} onClick={onClick}>
      <Icon className={css.NavItemIcon} src={icon} size="100" filled={active} />
      <Text className={css.NavItemLabel} as="span" size="T300" truncate>
        {label}
      </Text>
    </button>
  );
}

export function SettingsNavEyebrow({ children }: { children: ReactNode }) {
  return <span className={css.NavEyebrow}>{children}</span>;
}

export function SettingsNavSection({ children }: { children: ReactNode }) {
  return <span className={css.NavSection}>{children}</span>;
}
