import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const appCardVariants = cva(
  "rounded-surface transition-colors",
  {
    variants: {
      level: {
        1: "border border-border/80 bg-card text-card-foreground shadow-card",
        2: "border border-border/80 bg-card text-card-foreground shadow-card",
        3: "border border-border/80 bg-card text-card-foreground shadow-panel",
        inverse: "border-transparent bg-foreground text-background shadow-card",
      },
      padding: {
        none: "",
        sm: "p-4",
        md: "p-6",
        lg: "p-8",
      },
      interactive: {
        true: "hover:bg-accent/30 hover:text-accent-foreground",
        false: "",
      },
    },
    defaultVariants: {
      level: 1,
      padding: "none",
      interactive: false,
    },
  },
);

export interface AppCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof appCardVariants> {}

const AppCard = React.forwardRef<HTMLDivElement, AppCardProps>(
  ({ className, level, padding, interactive, ...props }, ref) => (
    <Card
      ref={ref}
      className={cn(
        appCardVariants({
          level,
          padding,
          interactive,
        }),
        className,
      )}
      {...props}
    />
  ),
);

AppCard.displayName = "AppCard";

export { AppCard, appCardVariants };