import { splitProps, type ParentProps, type Flow } from "solid-js";

interface CardProps extends ParentProps {
  /** "default" = rounded-xl (overview tile), "section" = rounded-2xl panel (details) */
  variant?: "default" | "section";
  /** Subtle shadow, off by default */
  shadowed?: boolean;
  /** If set, render as an <a> link instead of a <div> */
  href?: string;
  [key: string]: any;
}

export function Card(props: CardProps) {
  const [local, rest] = splitProps(props, [
    "variant",
    "shadowed",
    "class",
    "children",
    "href",
  ]);

  const base = () =>
    `border border-line ${
      local.variant === "section" ? "bg-surface/50 rounded-2xl" : "bg-surface rounded-xl"
    } ${local.shadowed ? "shadow-md" : ""} ${local.class ?? ""}`;

  const children = local.children as Flow;

  if (local.href) {
    return (
      <a {...(rest as object)} href={local.href} class={base()}>
        {children}
      </a>
    );
  }

  return (
    <div {...(rest as object)} class={base()}>
      {children}
    </div>
  );
}