import type { ReactNode } from 'react';
import { Label, Textarea } 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>
    <Textarea className="w-80" placeholder="Tell us what you need help with…" />
  </Surface>
);

export const WithLabel = () => (
  <Surface>
    <div className="flex w-80 flex-col gap-2">
      <Label htmlFor="brief">Project brief</Label>
      <Textarea
        id="brief"
        rows={4}
        defaultValue={
          'We run a small Auckland cafe and need our Squarespace site moved to NZ hosting, plus email set up on a custom domain.'
        }
      />
    </div>
  </Surface>
);

export const Disabled = () => (
  <Surface>
    <Textarea className="w-80" disabled defaultValue="Submitted — we'll be in touch within one business day." />
  </Surface>
);