import { cn } from "~/lib/utils";
import type { JSX } from "solid-js";

interface CardProps {
  class?: string;
  children: JSX.Element;
  header?: JSX.Element;
  footer?: JSX.Element;
}

export default function Card(props: CardProps) {
  return (
    <div
      class={cn(
        "gradient-card border border-[var(--color-border)]/50 rounded-xl overflow-hidden",
        props.class,
      )}
    >
      {props.header && (
        <div class="px-6 py-4 border-b border-[var(--color-border)]/50">
          {props.header}
        </div>
      )}
      <div class="px-6 py-4">{props.children}</div>
      {props.footer && (
        <div class="px-6 py-4 border-t border-[var(--color-border)]/50">
          {props.footer}
        </div>
      )}
    </div>
  );
}
