import type { ReactNode } from 'react';
import {
  Button,
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from 'cloudrite';
import { ArrowUpRight, Cloud, TrendingUp } 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 ServiceCard = () => (
  <Surface>
    <Card className="max-w-sm">
      <CardHeader>
        <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
          <Cloud className="size-6" />
        </div>
        <CardTitle className="mt-4">Cloud Hosting</CardTitle>
        <CardDescription>
          Fast, easy hosting for WordPress, game servers and more — proudly hosted here in New
          Zealand.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ul className="flex flex-wrap gap-2">
          {['NZ Hosted', 'WordPress', 'Game Servers', '24/7 Uptime'].map((f) => (
            <li
              key={f}
              className="rounded-full border border-border px-3 py-1 text-xs text-muted-foreground"
            >
              {f}
            </li>
          ))}
        </ul>
      </CardContent>
      <CardFooter>
        <Button variant="outline" className="w-full">
          Explore hosting
          <ArrowUpRight />
        </Button>
      </CardFooter>
    </Card>
  </Surface>
);

export const WithAction = () => (
  <Surface>
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Managed WordPress</CardTitle>
        <CardDescription>Renews 12 March 2027</CardDescription>
        <CardAction>
          <Button variant="ghost" size="sm">
            Manage
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="text-sm text-muted-foreground">
        Backups, updates and uptime monitoring handled for you. Includes a free NZ-hosted staging
        site.
      </CardContent>
    </Card>
  </Surface>
);

export const StatCard = () => (
  <Surface>
    <Card className="max-w-xs">
      <CardHeader>
        <CardDescription>Uptime this month</CardDescription>
        <CardTitle className="font-sans text-3xl">99.98%</CardTitle>
        <CardAction>
          <span className="flex items-center gap-1 text-xs text-primary">
            <TrendingUp className="size-3" />
            +0.04%
          </span>
        </CardAction>
      </CardHeader>
      <CardFooter className="text-xs text-muted-foreground">
        Measured across all Auckland edge nodes
      </CardFooter>
    </Card>
  </Surface>
);