import type { Meta, StoryObj } from "@storybook/react-vite";
import { DollarSign, Zap } from "lucide-react";

import { StatCard } from "./stat-card";
import { FeatureCard } from "./feature-card";
import { PricingCard } from "./pricing-card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const THEMES = ["minimal", "brutalist", "aurora"] as const;

/** A compact sampler rendered once per theme, side by side. */
function Sampler() {
  return (
    <div className="grid w-72 gap-4">
      <div className="flex flex-wrap items-center gap-2">
        <Button size="sm">Primary</Button>
        <Button size="sm" variant="outline">
          Outline
        </Button>
        <Badge>New</Badge>
      </div>
      <StatCard label="Revenue" value="$48,120" delta={12.4} icon={DollarSign} />
      <FeatureCard
        icon={Zap}
        title="Themeable"
        description="One attribute re-skins everything."
      />
      <PricingCard
        plan="Pro"
        price="$29"
        features={["Unlimited", "Support", "Analytics"]}
        featured
      />
    </div>
  );
}

const meta = {
  title: "UI Library/Themes",
  parameters: { layout: "fullscreen" },
} satisfies Meta;

export default meta;
type Story = StoryObj<typeof meta>;

/**
 * All three themes at once. Each column hard-sets its own `data-theme`,
 * overriding the toolbar selection — this is the "3 variants" overview.
 */
export const AllThemes: Story = {
  render: () => (
    <div className="flex flex-wrap gap-6 p-2">
      {THEMES.map((t) => (
        <div
          key={t}
          data-theme={t}
          className="bg-background text-foreground rounded-xl border p-5"
        >
          <p className="text-muted-foreground mb-4 text-xs font-medium tracking-wide uppercase">
            {t}
          </p>
          <Sampler />
        </div>
      ))}
    </div>
  ),
};