Button

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import styles from "./button.module.css";

const buttonVariants = cva(styles.base, {
  variants: {
    variant: {
      primary: styles.primary,
      secondary: styles.secondary,
      destructive: styles.destructive,
      outline: styles.outline,
      ghost: styles.ghost,
      link: styles.link,
    },
    size: {
      small: styles.small,
      medium: styles.medium,
      large: styles.large,
    },
  },
  defaultVariants: {
    variant: "primary",
    size: "medium",
  },
});

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={buttonVariants({ variant, size, className })}
        ref={ref}
        {...props}
      />
    );
  }
);
Button.displayName = "Button";

export { Button, buttonVariants };

.base {
  align-items: center;
  border-width: 2px;
  border-style: solid;
  border-radius: calc(var(--radius) - 0.25rem);
  border-color: transparent;
  display: inline-flex;
  height: fit-content;
  transition: 0.1s ease-in-out background-color;
}

.base:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* VARIANTS */

.primary {
  background-color: hsl(var(--primary, lightcoral));
  color: hsl(var(--primary-foreground, white));
}

.primary:hover {
  background-color: hsl(var(--primary-darken));
}

.secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.secondary:hover {
  background-color: hsl(var(--secondary-darken));
}

.destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.destructive:hover {
  background-color: hsl(var(--destructive-darken));
}

.outline {
  background-color: transparent;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

.outline:hover {
  background-color: hsl(var(--accent));
}

.ghost {
  background-color: transparent;
  color: hsl(var(--foreground));
}

.ghost:hover {
  background-color: hsl(var(--accent));
}

.link {
  background-color: transparent;
  color: hsl(var(--primary));
  text-underline-offset: 5px;
}

.link:hover {
  text-decoration: underline;
}

/* SIZES */

.small {
  font-size: var(--text-sm);
  line-height: 1.25rem;
  padding: 0.25rem 0.5rem;
}

.medium {
  font-size: var(--text-md);
  line-height: 1.5rem;
  padding: 0.5rem 1rem;
}

.large {
  font-size: var(--text-lg);
  line-height: 2rem;
  padding: 1rem 2rem;
}