'use client'

import React from 'react'
import { Button, Col, Row } from 'antd'
import { Text } from '@/components/Typography/Text'

export interface IProps {
  isReloading: boolean
  close: () => void
  reload: () => void
}

const empty = () => ({
  title: 'Select Product Type',
  content: (
    <>
      <Row gutter={[10, 10]} className="p__y--24">
        <Col span={24} className="text__align--center">
        </Col>
        <Col span={24} className="text__align--center">
          <Text preset="semibold18" className="d--block m__b--4">
            No Products Found
          </Text>
          <Text>
            You have no products in your Shopify Store. To add products to your
            Komi profile, you need to add them to your Shopify store first. You
            can click reload once your products are added to refresh this page.
          </Text>
        </Col>
      </Row>
    </>
  ),
  footer: (
    <Row justify="end" gutter={[16, 16]}>
      <Col>
        <Button
          size="large"
          block
          onClick={close}
          className="text__transform--uppercase letter__spacing--1"
        >
          Close
        </Button>
      </Col>
      <Col>
        <Button
          className="text__transform--uppercase letter__spacing--1"
          type="primary"
          block
          size="large"
        >
          Reload
        </Button>
      </Col>
    </Row>
  )
})

export default empty