import React from "react";
import { Meta, StoryObj } from "@storybook/react-webpack5";
import { ChartLoader, ChartPlaceholder } from "./ChartLoader";
import { Card } from "../../tremor/Card";

const meta: Meta = {
  component: ChartLoader,
  title: "Components/Chart Loader",
  argTypes: {},
};
export default meta;

type Story = StoryObj<typeof ChartLoader>;

export const Variants: Story = {
  render: (args) => (
    <div className="onvo-h-24 onvo-w-full onvo-flex onvo-flex-col onvo-gap-4">
      <ChartLoader />

      <div className="onvo-grid onvo-grid-cols-3 onvo-gap-4">
        {["bar", "line", "metric"].map((type) => (
          <Card key={type}>
            <ChartPlaceholder title="Generating chart..." showProgress type={type} />
          </Card>
        ))}
      </div>

      <div className="onvo-grid onvo-grid-cols-3 onvo-gap-4">
        {["line", "bar", "metric"].map((type) => (
          <Card key={type}>
            <ChartPlaceholder showProgress type={type} />
          </Card>
        ))}
      </div>

      <div className="onvo-grid onvo-grid-cols-3 onvo-gap-4">
        {["metric", "bar", "line"].map((type) => (
          <Card key={type}>
            <ChartPlaceholder type={type} />
          </Card>
        ))}
      </div>
    </div>
  ),

  args: {},
};