Thiago Borba

const ButtonRender = (
  { variant = 'primary', className, children, ...props }: ButtonProps,
  ref: Ref<HTMLButtonElement>,
) => {
  return (
    <button
      {...props}
      ref={ref}
      className={cn(styles.button, className, {
        [styles['-primary']]: variant === 'primary',
        [styles['-secondary']]: variant === 'secondary',
      })}
    >
      {children}
    </button>
  );
};

function stripForbiddenTags(html: string): string {
  return html.replace(
    /<\/?([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>/g,
    (match, tag: string) => (SHIKI_ALLOWED_TAGS.has(tag.toLowerCase()) ? match : ''),
  );
}

function ActionCard({ title, description, copied, onClick, disabled }: ActionCardProps) {
  return (
    <button
      className={`${styles.card}${copied ? ` ${styles.cardCopied}` : ''}`}
      onClick={onClick}
      disabled={disabled}
    >
      <span className={styles.actionTitle}>{title}</span>
      <span className={styles.actionDesc}>{description}</span>
      <span className={styles.copyLabel} aria-live="polite">
        {copied ? '✓ Copiado!' : 'Clique para copiar'}
      </span>
    </button>
  );
}

export const Paragraph: React.FunctionComponent<Props> = ({
  weight = 'regular',
  color = 'darkHigh',
  className,
  children,
  ...props
}) => (
  <p
    className={cn(styles['paragraph'], className, {
      [styles[`-${weight}`]]: !!weight,
      [styles['-darkLow']]: color === 'darkLow',
      [styles['-darkMedium']]: color === 'darkMedium',
      [styles['-darkHigh']]: color === 'darkHigh',
      [styles['-lightSolid']]: color === 'lightSolid',
      [styles['-lightHigh']]: color === 'lightHigh',
    })}
    {...props}
  >
    {children}
  </p>
);

async function fetchAllPages<T>(endpoint: string): Promise<T[]> {
  const firstPage = await request(endpoint);
  const { results, count } = firstPage.data;

  const totalPages = Math.ceil(count / 10);
  const remainingRequests = Array.from({ length: totalPages - 1 }, (_, i) =>
    request(`${endpoint}?page=${i + 2}`),
  );

  const remainingPages = await Promise.all(remainingRequests);
  const remainingResults = remainingPages.flatMap((page) => page.data.results);

  return [...results, ...remainingResults];
}

function HeaderContainer({ children, ...props }: InterfaceVStackProps) {
  return (
    <VStack backgroundColor={"UCondo.dark"} padding={4} {...props}>
      <StatusBar barStyle="light-content" />
      <Box safeAreaTop />
      {children}
    </VStack>
  );
}

const ButtonRender = (
  { variant = 'primary', className, children, ...props }: ButtonProps,
  ref: Ref<HTMLButtonElement>,
) => {
  return (
    <button
      {...props}
      ref={ref}
      className={cn(styles.button, className, {
        [styles['-primary']]: variant === 'primary',
        [styles['-secondary']]: variant === 'secondary',
      })}
    >
      {children}
    </button>
  );
};

function stripForbiddenTags(html: string): string {
  return html.replace(
    /<\/?([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>/g,
    (match, tag: string) => (SHIKI_ALLOWED_TAGS.has(tag.toLowerCase()) ? match : ''),
  );
}

function ActionCard({ title, description, copied, onClick, disabled }: ActionCardProps) {
  return (
    <button
      className={`${styles.card}${copied ? ` ${styles.cardCopied}` : ''}`}
      onClick={onClick}
      disabled={disabled}
    >
      <span className={styles.actionTitle}>{title}</span>
      <span className={styles.actionDesc}>{description}</span>
      <span className={styles.copyLabel} aria-live="polite">
        {copied ? '✓ Copiado!' : 'Clique para copiar'}
      </span>
    </button>
  );
}

export const Paragraph: React.FunctionComponent<Props> = ({
  weight = 'regular',
  color = 'darkHigh',
  className,
  children,
  ...props
}) => (
  <p
    className={cn(styles['paragraph'], className, {
      [styles[`-${weight}`]]: !!weight,
      [styles['-darkLow']]: color === 'darkLow',
      [styles['-darkMedium']]: color === 'darkMedium',
      [styles['-darkHigh']]: color === 'darkHigh',
      [styles['-lightSolid']]: color === 'lightSolid',
      [styles['-lightHigh']]: color === 'lightHigh',
    })}
    {...props}
  >
    {children}
  </p>
);

async function fetchAllPages<T>(endpoint: string): Promise<T[]> {
  const firstPage = await request(endpoint);
  const { results, count } = firstPage.data;

  const totalPages = Math.ceil(count / 10);
  const remainingRequests = Array.from({ length: totalPages - 1 }, (_, i) =>
    request(`${endpoint}?page=${i + 2}`),
  );

  const remainingPages = await Promise.all(remainingRequests);
  const remainingResults = remainingPages.flatMap((page) => page.data.results);

  return [...results, ...remainingResults];
}

function HeaderContainer({ children, ...props }: InterfaceVStackProps) {
  return (
    <VStack backgroundColor={"UCondo.dark"} padding={4} {...props}>
      <StatusBar barStyle="light-content" />
      <Box safeAreaTop />
      {children}
    </VStack>
  );
}