/**
 * White card that groups related settings, with a title and short intro.
 */
const SettingsCard = ({ title, description, badge, children }) => (
  <section className="ino:rounded-xl ino:border ino:border-border ino:bg-card ino:px-6 ino:pt-5 ino:pb-1.5">
    <h2 className="ino:m-0 ino:flex ino:items-center ino:gap-2 ino:text-base ino:font-semibold ino:text-foreground">
      {title}
      {badge}
    </h2>
    {description && (
      <p className="ino:mt-1 ino:mb-1 ino:text-sm ino:text-muted-foreground">
        {description}
      </p>
    )}
    <div>{children}</div>
  </section>
);

export default SettingsCard;