import { cn } from "@rakazo/ui-web/lib/utils";
import type * as React from "react";

function H1({ className, ...props }: React.ComponentProps<"h1">) {
  return (
    <h1
      className={cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className)}
      {...props}
    />
  );
}

function H2({ className, ...props }: React.ComponentProps<"h2">) {
  return (
    <h2
      className={cn(
        "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0",
        className,
      )}
      {...props}
    />
  );
}

function H3({ className, ...props }: React.ComponentProps<"h3">) {
  return (
    <h3
      className={cn("scroll-m-20 text-ui-title font-semibold tracking-tight", className)}
      {...props}
    />
  );
}

function H4({ className, ...props }: React.ComponentProps<"h4">) {
  return (
    <h4
      className={cn("scroll-m-20 text-ui-title-sm font-semibold tracking-tight", className)}
      {...props}
    />
  );
}

function P({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      className={cn(
        "text-ui-body leading-[var(--line-height-body)] [&:not(:first-child)]:mt-6",
        className,
      )}
      {...props}
    />
  );
}

function Blockquote({ className, ...props }: React.ComponentProps<"blockquote">) {
  return (
    <blockquote className={cn("mt-6 border-l-2 pl-6 italic text-ui-body", className)} {...props} />
  );
}

function InlineCode({ className, ...props }: React.ComponentProps<"code">) {
  return (
    <code
      className={cn(
        "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-ui-body-sm font-semibold",
        className,
      )}
      {...props}
    />
  );
}

function Lead({ className, ...props }: React.ComponentProps<"p">) {
  return <p className={cn("text-ui-title-sm text-muted-foreground", className)} {...props} />;
}

function Large({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("text-ui-title-sm font-semibold", className)} {...props} />;
}

function Small({ className, ...props }: React.ComponentProps<"small">) {
  return <small className={cn("text-ui-body-sm font-medium leading-none", className)} {...props} />;
}

function Muted({ className, ...props }: React.ComponentProps<"p">) {
  return <p className={cn("text-ui-body-sm text-muted-foreground", className)} {...props} />;
}

function Caption({ className, ...props }: React.ComponentProps<"span">) {
  return <span className={cn("text-ui-caption text-muted-foreground", className)} {...props} />;
}

function LabelText({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      className={cn(
        "text-ui-label font-medium uppercase tracking-wider text-muted-foreground",
        className,
      )}
      {...props}
    />
  );
}

export { Blockquote, Caption, H1, H2, H3, H4, InlineCode, LabelText, Large, Lead, Muted, P, Small };