import type { ReactNode } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } 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 Default = () => (
  <Surface>
    <Tabs defaultValue="overview" className="w-96">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="backups">Backups</TabsTrigger>
        <TabsTrigger value="domains">Domains</TabsTrigger>
      </TabsList>
      <TabsContent value="overview" className="text-sm text-muted-foreground">
        cloudrite.co.nz — Business plan, Auckland region, 99.98% uptime this month.
      </TabsContent>
      <TabsContent value="backups" className="text-sm text-muted-foreground">
        Last snapshot 03:00 NZST. 30 restore points retained.
      </TabsContent>
      <TabsContent value="domains" className="text-sm text-muted-foreground">
        1 domain, auto-renewing 12 March 2027.
      </TabsContent>
    </Tabs>
  </Surface>
);