import classnames from 'classnames';
import React, { ReactNode } from 'react';

interface Props {
	kolonner: string;
	headers: ReactNode;
	children?: ReactNode;
	color: string;
}

export function Arbeidskort({ headers, children, kolonner, color }: Props) {
	return (
		<li
			style={{
				borderLeft: `10px solid ${color}`,
			}}
			className="arbeidskort"
		>
			<div
				style={{
					gridTemplateColumns: kolonner,
				}}
				className="arbeidskort-header"
				data-hj-suppress
			>
				{headers}
			</div>
			{children}
		</li>
	);
}

interface IArbeidskortGrid {
	children: ReactNode;
	onClick: () => void;
	maksimerMinimerTekst: string;
	visSeMer?: boolean;
	utvidet?: boolean;
}

export function ArbeidskortGrid({
	children,
	onClick,
	maksimerMinimerTekst,
	visSeMer = false,
	utvidet = false,
}: IArbeidskortGrid) {
	return (
		<div>
			<ul className="liste-ustilet">{children}</ul>
			{visSeMer ? (
				<div>
					<button
						className="arbeidskort-se-mer klikkbar"
						onClick={onClick}
					>
						{maksimerMinimerTekst}{' '}
						<span
							className={classnames({
								'pil-opp': utvidet,
								'pil-ned': !utvidet,
							})}
						></span>
					</button>
				</div>
			) : null}
		</div>
	);
}