import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const typographyVariants = cva(
  "text-foreground transition-colors",
  {
    variants: {
      variant: {
        h1: "scroll-m-20 text-4xl font-black tracking-tight lg:text-5xl font-['Lexend']",
        h2: "scroll-m-20 text-3xl font-bold tracking-tight first:mt-0 font-['Lexend']",
        h3: "scroll-m-20 text-2xl font-bold tracking-tight font-['Lexend']",
        h4: "scroll-m-20 text-xl font-bold tracking-tight font-['Lexend']",
        p: "leading-7 [&:not(:first-child)]:mt-6 font-['Lexend_Deca']",
        blockquote: "mt-6 border-l-2 pl-6 italic",
        list: "my-6 ml-6 list-disc [&>li]:mt-2",
        lead: "text-xl text-muted-foreground",
        large: "text-lg font-semibold",
        small: "text-sm font-medium leading-none",
        muted: "text-sm text-muted-foreground",
      },
    },
    defaultVariants: {
      variant: "p",
    },
  }
);

interface TypographyProps
  extends React.HTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>,
    VariantProps<typeof typographyVariants> {}

const H1 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
  <h1
    ref={ref}
    className={cn(typographyVariants({ variant: "h1" }), className)}
    {...props}
  />
));
H1.displayName = "H1";

const H2 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
  <h2
    ref={ref}
    className={cn(typographyVariants({ variant: "h2" }), className)}
    {...props}
  />
));
H2.displayName = "H2";

const H3 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn(typographyVariants({ variant: "h3" }), className)}
    {...props}
  />
));
H3.displayName = "H3";

const H4 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
  <h4
    ref={ref}
    className={cn(typographyVariants({ variant: "h4" }), className)}
    {...props}
  />
));
H4.displayName = "H4";

const P = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn(typographyVariants({ variant: "p" }), className)}
    {...props}
  />
));
P.displayName = "P";

const Muted = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn(typographyVariants({ variant: "muted" }), className)}
    {...props}
  />
));
Muted.displayName = "Muted";

const Large = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(typographyVariants({ variant: "large" }), className)}
    {...props}
  />
));
Large.displayName = "Large";

const Small = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(({ className, ...props }, ref) => (
  <small
    ref={ref}
    className={cn(typographyVariants({ variant: "small" }), className)}
    {...props}
  />
));
Small.displayName = "Small";

export { H1, H2, H3, H4, P, Muted, Large, Small, typographyVariants };