import type { ReactNode } from 'react';
import {
  Label,
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} 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>
);

// The open state is the primary story: a closed trigger shows none of the
// compound parts, and SelectContent/SelectItem/SelectGroup/SelectLabel are the
// half of this API worth seeing.
export const Open = () => (
  <Surface>
    <Select defaultValue="hosting" defaultOpen>
      <SelectTrigger className="w-64">
        <SelectValue placeholder="Choose a service" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="web">Web Development</SelectItem>
        <SelectItem value="hosting">Cloud Hosting</SelectItem>
        <SelectItem value="support">I.T Support &amp; Repairs</SelectItem>
        <SelectItem value="ai">AI Solutions</SelectItem>
      </SelectContent>
    </Select>
  </Surface>
);

export const Default = () => (
  <Surface>
    <Select defaultValue="hosting">
      <SelectTrigger className="w-64">
        <SelectValue placeholder="Choose a service" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="web">Web Development</SelectItem>
        <SelectItem value="hosting">Cloud Hosting</SelectItem>
        <SelectItem value="support">I.T Support &amp; Repairs</SelectItem>
        <SelectItem value="ai">AI Solutions</SelectItem>
      </SelectContent>
    </Select>
  </Surface>
);

export const WithLabelAndGroups = () => (
  <Surface>
    <div className="flex w-64 flex-col gap-2">
      <Label htmlFor="plan">Hosting plan</Label>
      <Select>
        <SelectTrigger id="plan" className="w-full">
          <SelectValue placeholder="Select a plan" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Shared</SelectLabel>
            <SelectItem value="starter">Starter — 1 site</SelectItem>
            <SelectItem value="business">Business — 10 sites</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Dedicated</SelectLabel>
            <SelectItem value="vps">VPS</SelectItem>
            <SelectItem value="game">Game server</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  </Surface>
);

export const Disabled = () => (
  <Surface>
    <Select defaultValue="starter" disabled>
      <SelectTrigger className="w-64">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="starter">Starter — 1 site</SelectItem>
      </SelectContent>
    </Select>
  </Surface>
);