import type { ComponentChildren } from "preact";
import { CARD, COLORS } from "./constants";

interface StyleProps {
  style?: Record<string, string | number>;
  children?: ComponentChildren;
}

export function Card({ children, style }: StyleProps) {
  return (
    <div
      style={{
        width: CARD.width,
        height: CARD.height,
        backgroundColor: COLORS.background,
        display: "flex",
        flexDirection: "column",
        padding: CARD.padding,
        paddingBottom: 0,
        justifyContent: "space-between",
        ...style,
      }}>
      {children}
    </div>
  );
}

export function Row({ children, style }: StyleProps) {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        ...style,
      }}>
      {children}
    </div>
  );
}

export function Col({ children, style }: StyleProps) {
  return (
    <div style={{ display: "flex", flexDirection: "column", ...style }}>
      {children}
    </div>
  );
}