import type { ReactNode } from 'react';
import { Avatar, AvatarFallback, AvatarImage } 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>
);

// AvatarImage points at a remote URL in real use; previews render offline, so
// these show the fallback path — which is also the state worth documenting,
// since it is what every avatar shows before the image resolves.
export const Fallbacks = () => (
  <Surface>
    <div className="flex items-center gap-3">
      {['JL', 'CR', 'AM', 'TK'].map((initials) => (
        <Avatar key={initials}>
          <AvatarFallback>{initials}</AvatarFallback>
        </Avatar>
      ))}
    </div>
  </Surface>
);

export const Sizes = () => (
  <Surface>
    <div className="flex items-center gap-4">
      <Avatar className="size-6">
        <AvatarFallback className="text-[10px]">CR</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>CR</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarFallback>CR</AvatarFallback>
      </Avatar>
      <Avatar className="size-16">
        <AvatarFallback className="text-lg">CR</AvatarFallback>
      </Avatar>
    </div>
  </Surface>
);

// size-10 with -space-x-3: at the default size-8 the overlap eats enough of each
// circle that the initials clip.
export const Stacked = () => (
  <Surface>
    <div className="flex -space-x-3">
      {['JL', 'CR', 'AM'].map((initials) => (
        <Avatar key={initials} className="size-10 ring-2 ring-background">
          <AvatarImage alt="" />
          <AvatarFallback>{initials}</AvatarFallback>
        </Avatar>
      ))}
      <Avatar className="size-10 ring-2 ring-background">
        <AvatarFallback className="bg-primary text-primary-foreground">+5</AvatarFallback>
      </Avatar>
    </div>
  </Surface>
);