import React from 'react'
import TextView from '../components/TextView/TextView'
import {
  mockTextViewBackground,
  mockTextViewFontFamily,
  mockTextViewFontSize,
  mockTextViewEmoji,
  mockTextViewTextCenter,
} from '../../__MOCK__/mockTextView'

export default {
  title: 'page-ui/TextView',
  component: TextView,
}

const Template = (args) => <TextView {...args} />

export const CustonFontFamily = Template.bind({})
CustonFontFamily.args = {
  content: mockTextViewFontFamily.metaData.content,
  marginBottom: mockTextViewFontFamily.style.marginBottom
}

export const CustomFontSize = Template.bind({})
CustomFontSize.args = {
  content: mockTextViewFontSize.metaData.content,
  marginBottom: mockTextViewFontSize.style.marginBottom
}

export const CustomTextAlign = Template.bind({})
CustomTextAlign.args = {
  content: mockTextViewTextCenter.metaData.content,
  marginBottom: mockTextViewTextCenter.style.marginBottom
}

export const Emoji = Template.bind({})
Emoji.args = {
  content: mockTextViewEmoji.metaData.content,
  marginBottom: mockTextViewEmoji.style.marginBottom
}

export const Background = Template.bind({})
Background.args = {
  content: mockTextViewBackground.metaData.content,
  marginBottom: mockTextViewBackground.style.marginBottom
}