import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { Card } from "./Card";
import { Center } from "native-base";

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: "App/Card",
  component: Card,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    title: { control: "text", defaultValue: "Card Title" },
    description: { control: "text", defaultValue: "Card Description" },
    imageURI: { control: "text", defaultValue: "https://source.unsplash.com/random" },
    imageTag: { control: "text", defaultValue: "PHOTO" },
    size: { control: "select", options: ["xs", "sm", "md", "lg"] },
  },
} as ComponentMeta<typeof Card>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Card> = (args) => (
  <Center flex={1}>
    <Card {...args} />
  </Center>
);

export const Basic = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
Basic.args = {};