import figma from '@figma/code-connect';

figma.connect(
  'https://www.figma.com/design/Zyh9RyabNaqkjbuFWP9Aqj/%E2%9C%A8-Components--ADS2---Stable-version-?node-id=16419-62764',
  {
    imports: ["import { PageHeader } from '@mozaic-ds/web-components/svelte';"],
    props: {
      title: figma.string('Title'),
      shadow: figma.boolean('Has shadow'),
      hasTabs: figma.boolean('Has tabs'),
      hasActionsBar: figma.boolean('Has actions bar'),
      backbutton: figma.boolean('Has back button'),
      breakpoint: figma.enum('Breakpoint', {
        'S (320 to 679px)': 's',
        'M to XXL (680px and up)': 'm',
      }),
    },
    example: ({ title, shadow, backbutton }) => (
      <PageHeader
        title={title}
        shadow={shadow}
        backbutton={backbutton}
        status="info"
        statuslabel="Status"
        extrainfo="Additional info"
      ></PageHeader>
    ),
  },
);
