import "./index.scss";

import clsx from "clsx";
import React from "react";

export type PageBannerProps = React.HTMLProps<HTMLDivElement> & {
	as?: "header" | "section" | "div";
};

export function PageBanner({ as, className, children, ...other }: PageBannerProps) {
	const Component = as ? as : "section";

	return (
		<Component className={clsx("ObPageBanner-root", className)} {...other}>
			<div className="container px-0">
				<div className={"ObPageBanner-pageBannerInner"}>{children}</div>
			</div>
		</Component>
	);
}

export type BannerImageProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;

export const BannerImage = React.forwardRef<HTMLImageElement, BannerImageProps>(function BannerImage(
	props: BannerImageProps,
	ref,
) {
	const { className, ...other } = props;
	return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} alt="" {...other} />;
});

export type TabListProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
	as?: "ul" | "ol" | "nav" | "div" | "span";
	sticky?: boolean;
};

export function TabList({ as, className, children, sticky, ...other }: TabListProps) {
	const Component = as ? as : "nav";

	return (
		<Component
			className={clsx("ObPageBanner-pageBanner", "ObPageBanner-tabList", sticky && "sticky", className)}
			{...other}
		>
			<div className="container px-0">
				<div className={"ObPageBanner-tabListInner"}>{children}</div>
			</div>
		</Component>
	);
}

export type TabProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> &
	Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "target" | "rel"> & {
		active?: boolean;
		as?: "a" | "li" | "div" | "span";
	};

export function Tab({ active, as, className, children, ...other }: TabProps) {
	const Component = as ? as : "a";

	return (
		<Component className={clsx("ObPageBanner-tab", active && "active", className)} {...other}>
			{children}
		</Component>
	);
}

export type TitleProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {
	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span" | "p";
};

export function Title({ as, className, children, ...other }: TitleProps) {
	const Component = as ? as : "h1";

	return (
		<Component className={clsx("ObPageBanner-bannerTitle", className)} {...other}>
			{children}
		</Component>
	);
}