"use client";

import type { ReactNode } from "react";
import styles from "./platform-shell.module.css";

export function ResourceToolbar(props: { title: string; description: string; children?: ReactNode }) {
  return (
    <>
      <div className={styles.cardHeader}>
        <div>
          <h3>{props.title}</h3>
          <p>{props.description}</p>
        </div>
      </div>
      {props.children ? <div className={styles.toolbar}>{props.children}</div> : null}
    </>
  );
}

export function ResourceCard(props: { children: ReactNode }) {
  return <article className={styles.taskCard}>{props.children}</article>;
}

export function ResourceCardHeader(props: {
  title: string;
  subtitle?: string;
  badges?: ReactNode;
  actions?: ReactNode;
  children?: ReactNode;
}) {
  return (
    <div className={styles.targetCardHeader}>
      <div className={styles.taskMain}>
        <div className={styles.taskTitleRow}>
          <div className={styles.targetTitleBlock}>
            <h3>{props.title}</h3>
            {props.subtitle ? <p className={styles.endpointText}>{props.subtitle}</p> : null}
          </div>
          {props.badges ? <div className={styles.badgeRow}>{props.badges}</div> : null}
        </div>
        {props.children}
      </div>
      {props.actions ? <div className={styles.actionFooter}>{props.actions}</div> : null}
    </div>
  );
}

export function ResourceActions(props: { children: ReactNode }) {
  return <div className={styles.actionRow}>{props.children}</div>;
}
