import React from 'react'
import { Container, Grid, Image, Spacer, Text } from '@nextui-org/react'
import { usePage, Link } from '@inertiajs/inertia-react';

const Footer = () => {
    const {settings} = usePage().props;
  return (
    <>
    <Container css={{ m: '0', maxWidth: '100%', p: '50px', background: '#09141D' }}>
        <Grid.Container justify='center' css={{ textAlign: 'center' }} >
            <Grid md={6} sm={12} xs={12} css={{ textAlign: 'left', p: '20px', m: '0' }} >
                <div>
                <Image width='120px' height='120px' css={{ display: 'inline' }} objectFit='contain' src={settings.logo} alt={settings.logo} />
                <Text color='white' css={{ mt: '20px' }} > {settings.short_des} </Text>
                </div>
            </Grid>
            <Grid md={2} sm={12} xs={12} css={{ flexDirection: 'column', borderRight: '1px solid #798da3', textAlign: 'left' }} >
                <Text color='white' h3 css={{ mb: '20px' }} > Contact Us </Text>
                <div style={{ marginBottom: '10px' }} >
                    <Text size={13} color='#798DA3'> Address </Text>
                    <Text color='white' size={15} b> {settings.address} </Text>
                </div>
                <div style={{ marginBottom: '10px' }} >
                    <Text size={13} color='#798DA3'> Phone </Text>
                    <Text color='white' size={15} b> {settings.phone} </Text>
                </div>
                <div style={{ marginBottom: '10px' }} >
                    <Text size={13} color='#798DA3'> Email </Text>
                    <Text color='white' size={15} b> {settings.email} </Text>
                </div>
            </Grid>
            <Grid md={2} sm={12} xs={12} css={{ flexDirection: 'column', borderRight: '1px solid #798da3' }} >
                <Text color='white' h3 css={{ mb: '20px' }} > Support </Text>
                <Link href={route('home')}>
                    <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > Home </Text>
                </Link>
                <Link href={route('about')}>
                    <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > About </Text>
                </Link>
                <Link href={route('stores')}>
                    <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > Stores </Text>
                </Link>
                <Link href={route('faqs')}>
                    <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > FAQs </Text>
                </Link>
                <Link href={route('contact')}>
                    <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > Inquiry </Text>
                </Link>
            </Grid>
            <Grid md={2} sm={12} xs={12} css={{ flexDirection: 'column' }} >
                <Text color='white' h3 css={{ mb: '20px' }} > Quick Link </Text>
                <Link href={route('collections')}>
                    <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > Event Products </Text>
                </Link>
                <Link href={route('nfts')}>
                    <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > NFT Collections </Text>
                </Link>
                <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > Market </Text>
                <Text color='#798DA3' size={15} css={{ mb: '10px', fontWeight: '600' }} > Partners </Text>
            </Grid>
        </Grid.Container>
    </Container>
    </>
  )
}

export default Footer