import { JSX, ParentComponent, splitProps } from "solid-js";

interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "elevated" | "ghost";
  padding?: "none" | "sm" | "md" | "lg";
}

export const Card: ParentComponent<CardProps> = (props) => {
  const [local, rest] = splitProps(props, [
    "variant",
    "padding",
    "children",
    "class",
  ]);

  const variantClasses = {
    default: "bg-canvas border border-border rounded-card",
    elevated: "surface-elevated rounded-card",
    ghost: "bg-transparent",
  };

  const paddingClasses = {
    none: "",
    sm: "p-4",
    md: "p-6",
    lg: "p-8",
  };

  const baseClasses = [
    variantClasses[local.variant || "default"],
    paddingClasses[local.padding || "md"],
    local.class || "",
  ].join(" ");

  return (
    <div {...rest} class={baseClasses}>
      {local.children}
    </div>
  );
};

export const CardHeader: ParentComponent<JSX.HTMLAttributes<HTMLDivElement>> = (
  props
) => {
  const [local, rest] = splitProps(props, ["children", "class"]);
  return (
    <div {...rest} class={`mb-4 ${local.class || ""}`}>
      {local.children}
    </div>
  );
};

export const CardTitle: ParentComponent<JSX.HTMLAttributes<HTMLHeadingElement>> = (
  props
) => {
  const [local, rest] = splitProps(props, ["children", "class"]);
  return (
    <h3
      {...rest}
      class={`font-display text-lg font-semibold tracking-tight text-ink ${local.class || ""}`}
    >
      {local.children}
    </h3>
  );
};

export const CardDescription: ParentComponent<JSX.HTMLAttributes<HTMLParagraphElement>> = (
  props
) => {
  const [local, rest] = splitProps(props, ["children", "class"]);
  return (
    <p {...rest} class={`text-sm text-ink-muted mt-1 ${local.class || ""}`}>
      {local.children}
    </p>
  );
};

export const CardContent: ParentComponent<JSX.HTMLAttributes<HTMLDivElement>> = (
  props
) => {
  const [local, rest] = splitProps(props, ["children", "class"]);
  return (
    <div {...rest} class={local.class || ""}>
      {local.children}
    </div>
  );
};

export const CardFooter: ParentComponent<JSX.HTMLAttributes<HTMLDivElement>> = (
  props
) => {
  const [local, rest] = splitProps(props, ["children", "class"]);
  return (
    <div
      {...rest}
      class={`mt-6 pt-6 border-t border-border flex items-center gap-3 ${local.class || ""}`}
    >
      {local.children}
    </div>
  );
};
