import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";

export type FlexibleProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    fit?: "loose" | "tight";
  }
>;

export function Flexible({ children, className, fit = "loose", style, ...props }: FlexibleProps) {
  return (
    <div
      className={cn("min-w-0", fit === "tight" ? "flex-1" : "flex-[1_1_auto]", className)}
      style={{ minHeight: 0, ...style }}
      {...props}
    >
      {children}
    </div>
  );
}