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 border transition-all duration-200",
  {
    variants: {
      level: {
        1: "border-border bg-surface-1 text-foreground shadow-card",
        2: "border-border bg-surface-2 text-foreground shadow-sm",
        3: "border-border/90 bg-surface-3 text-foreground shadow-panel",
        inverse: "border-transparent bg-surface-inverse text-surface-inverse-foreground shadow-lg",
      },
      padding: {
        none: "",
        sm: "p-4",
        md: "p-6",
        lg: "p-8",
      },
      interactive: {
        true: "hover:-translate-y-0.5 hover:border-border-strong hover:shadow-md",
        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 };