import React from 'react'
import TextView from '../components/TextView/TextView'
import {
  mockTextViewBackground,
  mockTextViewFontFamily,
  mockTextViewFontSize,
  mockTextViewEmoji,
  mockTextViewTextCenter,
  mockTextViewFull,
  mockTextViewHalf,
} 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,
  dataAll: mockTextViewFontFamily,
  customStyle: {
    background: 'red',
    // width: '200px !important'
  }
}

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

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

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

export const Background = Template.bind({})
Background.args = {
  content: mockTextViewBackground.metaData.content,
  dataAll: mockTextViewBackground
}
export const TextViewFull = Template.bind({})
TextViewFull.args = {
  content: mockTextViewFull.metaData.content,
  dataAll: mockTextViewFull
}
export const TextViewHalf = Template.bind({})
TextViewHalf.args = {
  content: mockTextViewHalf.metaData.content,
  dataAll: mockTextViewHalf
}