import { ProBadge } from "@/components/plan-badges";
import { cn } from "@/lib/utils";

/**
 * One setting: label and help text on the left, the control on the right.
 * Pro settings show a Pro badge and are dimmed when locked (Free).
 * `stacked` puts the control under the label, full width (colour groups).
 */
const SettingRow = ({
  id,
  title,
  description,
  pro = false,
  locked = false,
  stacked = false,
  children,
}) => (
  <div
    className={cn(
      "ino:flex ino:flex-wrap ino:items-center ino:gap-x-4 ino:gap-y-3 ino:border-t ino:border-border/70 ino:py-4",
      locked && "ino:opacity-55",
    )}
  >
    <div className="ino:min-w-0 ino:flex-[1_1_240px]">
      <div
        id={id}
        className="ino:flex ino:items-center ino:gap-2 ino:text-sm ino:font-medium ino:text-foreground"
      >
        {title}
        {pro && <ProBadge />}
      </div>
      {description && (
        <p className="ino:mt-0.5 ino:mb-0 ino:text-[13px] ino:leading-snug ino:text-muted-foreground">
          {description}
        </p>
      )}
    </div>
    <div
      className={cn("ino:flex ino:items-center", stacked && "ino:basis-full")}
    >
      {children}
    </div>
  </div>
);

export default SettingRow;