import type { ReactNode } from 'react';
import { Input, Label } 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>
    <Input className="w-72" placeholder="you@yourbusiness.co.nz" />
  </Surface>
);

export const WithLabel = () => (
  <Surface>
    <div className="flex w-72 flex-col gap-2">
      <Label htmlFor="site">Website to migrate</Label>
      <Input id="site" defaultValue="https://cloudrite.co.nz" />
    </div>
  </Surface>
);

export const Types = () => (
  <Surface>
    <div className="flex w-72 flex-col gap-3">
      <Input type="email" placeholder="Email address" />
      <Input type="tel" defaultValue="021 107 7483" />
      <Input type="password" defaultValue="hunter2hunter2" />
      <Input type="file" />
    </div>
  </Surface>
);

export const States = () => (
  <Surface>
    <div className="flex w-72 flex-col gap-3">
      <Input placeholder="Enabled" />
      <Input placeholder="Disabled" disabled />
      <Input defaultValue="not-an-email" aria-invalid />
    </div>
  </Surface>
);