import React from 'react';
import '../scss/_tab-nav.scss';

/**
 * Eine Tab-Navigation, die als Ersatz für ButtonGroup dient.
 * A module for our tab navigation.
 *
 * @param {object} props - Props: options, value, onChange, className
 */
const TabNav = ({ options, value, onChange, className = '' }) => {

	return (
		<div
			className={`adpresso-tab-nav ${className}`}
			role="tablist"
			aria-label="View Selection"
		>
			{options.map((option) => {
				const isActive = value === option.key;

				return (
					<button
						key={option.key}
						type="button"
						role="tab"
						aria-selected={isActive}
						aria-controls={`panel-${option.key}`} // Optional for A11y
						id={`tab-${option.key}`}

						className={`adpresso-tab-nav__item ${isActive ? 'is-active' : ''}`}
						onClick={() => onChange(option.key)}
					>
						{option.label}
					</button>
				);
			})}
		</div>
	);
};

export default TabNav;