import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { ListBox } from '#/components/molecules/list-box.jsx';
import { Markdown } from '#/components/molecules/markdown.jsx';

/**
 * What a directory says about itself, in a panel of its own under the file
 * panel: the file's name on the panel's header, the rendered document
 * below it. The document keeps a reading measure whatever the panel's
 * width.
 * @param {{name: string, text?: string, repo: string, refName: string, basePath: string, space?: string, className?: string}} props
 */
export function ReadmePanel({
  name,
  text,
  repo,
  refName,
  basePath,
  space,
  className,
}) {
  return (
    <ListBox className={className}>
      <h2 className="border-border border-b bg-muted px-4 py-2.5 font-mono text-[12.5px] text-muted-foreground">
        {name}
      </h2>
      <div className="px-5 py-5">
        {text ? (
          <div className="max-w-3xl">
            <Markdown
              text={text}
              repo={repo}
              refName={refName}
              basePath={basePath}
              space={space}
            />
          </div>
        ) : (
          <Skeleton className="h-40 max-w-3xl" />
        )}
      </div>
    </ListBox>
  );
}