"use client";
/*
 * Documentation:
 * Card — https://app.subframe.com/f023064a5ca0/library?component=Card_56067c50-02ce-4c7c-8866-9db30e23ecc0
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface CardRootProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  size?: "extra-small" | "small" | "medium" | "large" | "extra-large";
  variant?:
    | "default"
    | "neutral"
    | "information"
    | "positive"
    | "warning"
    | "negative";
  className?: string;
}

const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>(
  function CardRoot(
    {
      children,
      size = "medium",
      variant = "default",
      className,
      ...otherProps
    }: CardRootProps,
    ref
  ) {
    return children ? (
      <div
        className={SubframeUtils.twClassNames(
          "group/56067c50 flex min-w-[384px] max-w-[448px] flex-col items-start gap-4 rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-4 py-4 shadow-sm",
          {
            "border border-solid border-border-negative-subtle bg-surface-feedback-subtle-negative":
              variant === "negative",
            "border border-solid border-border-warning-subtle bg-surface-feedback-subtle-warning":
              variant === "warning",
            "border border-solid border-border-positive-subtle bg-surface-feedback-subtle-positive":
              variant === "positive",
            "border border-solid border-border-information-subtle bg-surface-feedback-subtle-information":
              variant === "information",
            "border border-solid border-surface-feedback-subtle-neutral bg-surface-feedback-subtle-neutral":
              variant === "neutral",
            "px-8 py-8": size === "extra-large",
            "px-6 py-6": size === "large",
            "px-2 py-2": size === "small",
            "px-1 py-1": size === "extra-small",
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {children}
      </div>
    ) : null;
  }
);

export const Card = CardRoot;