(** Common layout and styling patterns *)

let flex_center = 
  Css.concat [
    Display.to_class `Flex;
    Flexbox.(to_class (justify `Center));
    Flexbox.(to_class (align_items `Center));
  ]

let absolute_center =
  Css.concat [
    Css.make "absolute";
    Css.make "top-1/2";
    Css.make "left-1/2";
    Css.make "-translate-x-1/2";
    Css.make "-translate-y-1/2";
  ]

let stack ?gap () =
  let gap_class = match gap with
    | Some g -> [Spacing.(to_class (gap `Y g))]
    | None -> [Css.make "space-y-4"]
  in
  Css.concat ([
    Display.to_class `Flex;
    Flexbox.(to_class (direction `Col));
  ] @ gap_class)

let inline_stack ?gap () =
  let gap_class = match gap with
    | Some g -> [Spacing.(to_class (gap `X g))]
    | None -> [Css.make "space-x-4"]
  in
  Css.concat ([
    Display.to_class `Flex;
    Flexbox.(to_class (align_items `Center));
  ] @ gap_class)

let full_height =
  Css.make "min-h-screen"

let sticky_header =
  Css.concat [
    Css.make "sticky";
    Css.make "top-0";
    Css.make "z-50";
  ]

let card =
  Css.concat [
    Css.make "bg-white";
    Css.make "rounded-lg";
    Css.make "shadow-md";
    Css.make "p-6";
  ]

let container ?center () =
  let base = Css.make "container" in
  let center_class = match center with
    | Some true -> Css.make "mx-auto"
    | _ -> Css.empty
  in
  Css.combine base center_class