import type { ReactNode } from 'react';
import { Alert, AlertDescription, AlertTitle } from 'cloudrite';
import { CircleAlert, Info, TriangleAlert } from 'lucide-react';

// 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 Default = () => (
  <Surface>
    <Alert className="max-w-md">
      <Info />
      <AlertTitle>Scheduled maintenance</AlertTitle>
      <AlertDescription>
        Our Auckland edge nodes will be patched on Sunday 02:00–03:00 NZST.
      </AlertDescription>
    </Alert>
  </Surface>
);

export const Destructive = () => (
  <Surface>
    <Alert variant="destructive" className="max-w-md">
      <CircleAlert />
      <AlertTitle>SSL certificate expired</AlertTitle>
      <AlertDescription>
        cloudrite.co.nz stopped serving HTTPS 2 hours ago. Renew it to restore the site.
      </AlertDescription>
    </Alert>
  </Surface>
);

export const TitleOnly = () => (
  <Surface>
    <Alert className="max-w-md">
      <TriangleAlert />
      <AlertTitle>Backup skipped — disk almost full.</AlertTitle>
    </Alert>
  </Surface>
);