import {
  TemsCardService,
  type TemsCardServiceProps,
} from "@components/cards/tems-card-service";

import type { Meta, StoryObj } from "@storybook/web-components";
import { html, nothing } from "lit";

const meta: Meta<TemsCardServiceProps & { cta: boolean }> = {
  title: "components/cards/tems-card-service",
  tags: ["autodocs", "!dev", "Organisms"],
  render: (args) => {
    new TemsCardService();

    return html`<tems-card-service
      header=${args.header}
      content=${args.content}
      img-left=${args.imgLeft}
      img-right=${args.imgRight}
      >${
        args.cta
          ? html`<tems-button label="action" type="outline-color"></tems-button>`
          : nothing
      }
    </tems-card-service>`;
  },
  args: {
    imgLeft: undefined,
    imgRight: undefined,
    header: undefined,
    content: undefined,
    cta: false,
  },
  argTypes: {
    header: {
      control: "text",
      description: "string",
    },
    content: {
      control: "text",
      description: "string",
    },
    imgLeft: {
      control: "text",
      description: "string url",
    },
    imgRight: {
      control: "text",
      description: "string url",
    },
    cta: {
      control: "boolean",
      description: "Sample slotted content",
    },
  },
};

export default meta;

export type TemsCardServiceStory = StoryObj<
  TemsCardServiceProps & { cta: boolean }
>;

export const Default: TemsCardServiceStory = {
  args: {
    header: "I'm a great title",
    content:
      "Lorem ipsum dolor sit amet consectetur. Amet facilisis viverra et urna pulvinar neque placerat ullamcorper interdum. Diam diam sit dolor iaculis et libero purus. Sapien arcu semper et lectus urna. Sed urna sollicitudin purus semper faucibus.",
    imgLeft: "https://placehold.co/420x500?text=ImgLeft",
    imgRight: "https://placehold.co/420x500?text=ImgRight",
    cta: false,
  },
};

export const DefaultSecond: TemsCardServiceStory = {
  args: {
    imgLeft: "https://placehold.co/420x500?text=ImgLeft",
    imgRight: "https://placehold.co/420x500?text=ImgRight",
    header: "Service Header",
    content: "This is the content of the service card.",
    cta: true,
  },
};

export const NoLeft: TemsCardServiceStory = {
  args: {
    imgRight: "https://placehold.co/420x500?text=ImgRight",
    header: "Service Header",
    content: "This is the content of the service card.",
    cta: true,
  },
};

export const NoRight: TemsCardServiceStory = {
  args: {
    imgLeft: "https://placehold.co/420x500?text=ImgLeft",
    header: "Service Header",
    content: "This is the content of the service card.",
    cta: true,
  },
};

export const JustText: TemsCardServiceStory = {
  args: {
    header: "Service Header",
    content: "This is the content of the service card.",
    cta: true,
  },
};