import { splitProps, type Ref, ComponentProps, ValidComponent } from "solid-js";
import { Dynamic } from "solid-js/web";

export type TypographyProps<E extends ValidComponent> = {
  ref?: Ref<E>;
  component?: E;
  class?: string;
} & ComponentProps<E>;

type TypographyKind =
  | "display4"
  | "display3"
  | "display2"
  | "display1"
  | "headline"
  | "title"
  | "subheading"
  | "body1"
  | "body2"
  | "caption"
  | "buttonText";

export function Typography<T extends ValidComponent>(
  props: { typography: TypographyKind } & TypographyProps<T>,
) {
  const [managed, passthough] = splitProps(props, [
    "ref",
    "component",
    "class",
    "typography",
  ]);
  return (
    <Dynamic
      ref={managed.ref}
      component={managed.component ?? "span"}
      class={`${managed.class || ""} ${managed.typography}`}
      {...passthough}
    ></Dynamic>
  );
}

export function Display4<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"display4"} {...props}></Typography>;
}
export function Display3<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"display3"} {...props}></Typography>;
}
export function Display2<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"display2"} {...props}></Typography>;
}
export function Display1<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"display1"} {...props}></Typography>;
}
export function Headline<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"headline"} {...props}></Typography>;
}
export function Title<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"title"} {...props}></Typography>;
}
export function Subheading<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"subheading"} {...props}></Typography>;
}
export function Body1<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"body1"} {...props}></Typography>;
}
export function Body2<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"body2"} {...props}></Typography>;
}
export function Caption<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"caption"} {...props}></Typography>;
}
export function ButtonText<E extends ValidComponent>(props: TypographyProps<E>) {
  return <Typography typography={"buttonText"} {...props}></Typography>;
}