import type { BdcComponent, BdcElement } from '../jsx-runtime';

type LayoutProps = {
  id?: string;
  gap?: number | string;
  padding?: number | string;
  children?: BdcElement[];
};

function layoutBlock(type: string, props: LayoutProps): BdcElement {
  return { type, props: { ...props }, children: props.children ?? [] };
}

type StoryRailProps = LayoutProps & {
  surface?: 'discover' | 'vibes';
};

export const StoryRail: BdcComponent = (props) => layoutBlock('story_rail', props as StoryRailProps);

type ProfileCompletionBannerProps = LayoutProps & {
  percentRef?: string;
  dismissActionId?: string;
  completeActionId?: string;
};

export const ProfileCompletionBanner: BdcComponent = (props) =>
  layoutBlock('profile_completion_banner', props as ProfileCompletionBannerProps);