import type { ReactNode } from 'react';
import { Skeleton } from 'cloudrite';

// Cloudrite is dark-only — foreground-coloured text and `border-border` are
// invisible on the preview harness's white card body. Stories render on the
// brand surface, which is also how a real screen is built.
const Surface = ({ children }: { children: ReactNode }) => (
  <div className="bg-background text-foreground rounded-lg p-6">{children}</div>
);

export const TextLines = () => (
  <Surface>
    <div className="flex w-80 flex-col gap-2">
      <Skeleton className="h-4 w-3/4" />
      <Skeleton className="h-4 w-full" />
      <Skeleton className="h-4 w-5/6" />
    </div>
  </Surface>
);

export const CardPlaceholder = () => (
  <Surface>
    <div className="flex w-80 items-center gap-4 rounded-xl border border-border p-4">
      <Skeleton className="size-12 shrink-0 rounded-xl" />
      <div className="flex w-full flex-col gap-2">
        <Skeleton className="h-4 w-2/3" />
        <Skeleton className="h-3 w-full" />
      </div>
    </div>
  </Surface>
);