import { Flex, Heading, Paper, Text } from '@pillar-ui/core'
import { Cart } from '@pillar-ui/icons'
import React from 'react'

export const StatusEmpty = () => {
  return (
    <Paper as={Flex} flow="4" items="center" direction="col" justify="center" width="100%" height="100%">
      <Cart width="68" />
      <Heading>Your cart is empty</Heading>
      <Text width="45c" align="center" color="b" low>
        Explore our products and add items to your cart
      </Text>
    </Paper>
  )
}

import { Flex, Heading, Paper, Text } from '@pillar-ui/core'
import { Cart, Lock } from '@pillar-ui/icons'
import React from 'react'

export const StatusNotFound = () => {
  return (
    <Paper as={Flex} flow="4" items="center" direction="col" justify="center" width="100%" height="100%">
      <Lock width="120" />
      <Heading size="9">404 - Page Not Found</Heading>
      <Text width="45c" align="center" color="b" low>
        The page you&apos;re looking for doesn&apos;t exist. It might have been removed, renamed, or the URL might be
        incorrect. Please check the address and try again, or return to the home page.
      </Text>
    </Paper>
  )
}

import { Button, Flex, Heading, Paper, ProgressBar, Text } from '@pillar-ui/core'
import { CalendarTime, Lock } from '@pillar-ui/icons'
import React from 'react'

export const StatusComingSoon = () => {
  return (
    <Paper as={Flex} flow="6" items="center" direction="col" justify="center" width="100%" height="100%">
      <CalendarTime width="64" />
      <Heading size="9">Coming Soon!</Heading>
      <Text width="45c" align="center" color="b" low>
        This feature is currently under development and will be available soon. Stay tuned for updates!
      </Text>
      <ProgressBar label="Coming Soon Progress Bar" value={90} max={100} />
      <Button variant="mixed" color="b">
        Go Back
      </Button>
    </Paper>
  )
}

import { Button, Flex, Heading, Paper, Text } from '@pillar-ui/core'
import { Cart, Lock } from '@pillar-ui/icons'
import React from 'react'

export const StatusError = () => {
  return (
    <Paper as={Flex} flow="6" items="center" direction="col" justify="center" width="100%" height="100%">
      <Heading size="7">Something Went Wrong</Heading>
      <Text width="45c" align="center" color="b" low>
        There was an error processing your request. Please try again later or contact support if the issue persists.
      </Text>

      <Flex gap="4">
        <Button>Retry</Button>
        <Button variant="soft">Contact Support</Button>
      </Flex>
    </Paper>
  )
}