import { Card } from "@mui/material";
import { styled } from "@mui/material/styles";
import React from "react";
import { MultiTimeFrame } from "../../components/Common";

export default {
  title: "Common/MultiTimeFrame",
  component: MultiTimeFrame,
  parameters: { actions: { argTypesRegex: "^on.*" } },
};

const StyledCard = styled(Card)({
  padding: "0.75rem",
  borderRadius: "75px",
  width: "350px",
});

const Template = (args) => {
  return (
    <StyledCard sx={{ minWidth: 275 }}>
      <MultiTimeFrame {...args} />
    </StyledCard>
  );
};

export const Default = Template.bind({});
Default.args = {
  data: [
    {
      title: "Hourly",
      type: "Positive",
      textSize: "14px",
      active: false,
      style: { width: "100px", height: "100px" },
    },
    {
      title: "Daily",
      type: "Negative",
      textSize: "14px",
      active: true,
      style: { width: "100px", height: "100px" },
    },
    {
      title: "Weekly",
      type: "No Direction",
      textSize: "14px",
      active: false,
      style: { width: "100px", height: "100px" },
    },
  ],
};