import type { ReactNode } from 'react';
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'cloudrite';
import { ChevronsUpDown } 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 Open = () => (
  <Surface>
    <Collapsible defaultOpen className="w-80">
      <div className="flex items-center justify-between gap-4">
        <span className="text-sm font-medium">What's included</span>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" aria-label="Toggle">
            <ChevronsUpDown />
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="mt-2 flex flex-col gap-2">
        {['Nightly backups', 'Managed SSL', 'Uptime monitoring'].map((item) => (
          <div key={item} className="rounded-md border border-border px-3 py-2 text-sm">
            {item}
          </div>
        ))}
      </CollapsibleContent>
    </Collapsible>
  </Surface>
);

export const Closed = () => (
  <Surface>
    <Collapsible className="w-80">
      <div className="flex items-center justify-between gap-4">
        <span className="text-sm font-medium">What's included</span>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon" aria-label="Toggle">
            <ChevronsUpDown />
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="mt-2 text-sm text-muted-foreground">
        Hidden until opened.
      </CollapsibleContent>
    </Collapsible>
  </Surface>
);