import { Button, Note } from '@based/ui'

export const meta: Based.UI.Extractor.MetaDescriptor = {
  name: 'Note',
  group: 'Blocks',
  section: 'components',
  icon: 'edit',
  component: Note,
  subtitle:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  showApi: true,
  showUsage: true,
}

export const blocks: Based.UI.Extractor.BlocksDescriptor[] = [
  {
    name: 'Default',
    type: 'component',
    description:
      'Default Note component with a title, description, and a button.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          width: 480,
        }}
      >
        <Note
          title="You've reached your monthly token limit."
          description="Upgrade to Premium to use an unlimited amount of tokens in a month."
        >
          <Button>Upgrade</Button>
        </Note>
      </div>
    ),
  },
  {
    name: 'Red',
    type: 'component',
    description: 'Note component with red color.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          width: 480,
        }}
      >
        <Note
          title="You've reached your monthly token limit."
          description="Upgrade to Premium to use an unlimited amount of tokens in a month."
          color="red"
        >
          <Button>Upgrade</Button>
        </Note>
      </div>
    ),
  },
  {
    name: 'Orange',
    type: 'component',
    description: 'Note component with orange color.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          width: 480,
        }}
      >
        <Note
          title="You've reached your monthly token limit."
          description="Upgrade to Premium to use an unlimited amount of tokens in a month."
          color="orange"
        >
          <Button>Upgrade</Button>
        </Note>
      </div>
    ),
  },
  {
    name: 'Green',
    type: 'component',
    description: 'Note component with green color.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          width: 480,
        }}
      >
        <Note
          title="You've reached your monthly token limit."
          description="Upgrade to Premium to use an unlimited amount of tokens in a month."
          color="green"
        >
          <Button>Upgrade</Button>
        </Note>
      </div>
    ),
  },
  {
    name: 'Blue',
    type: 'component',
    description: 'Note component with blue color.',
    style: {
      size: 'small',
      frame: false,
      flex: {
        justifyContent: 'center',
        alignItems: 'center',
      },
    },
    render: () => (
      <div
        style={{
          width: 480,
        }}
      >
        <Note
          title="You've reached your monthly token limit."
          description="Upgrade to Premium to use an unlimited amount of tokens in a month."
          color="blue"
        >
          <Button>Upgrade</Button>
        </Note>
      </div>
    ),
  },
]
