import Box from '@mui/material/Box';
import { Navigation } from '../../../components/organisms/Navigation';
import { assetUrl } from '../../shared/assets';

const FALogo = () => (
  <Box sx={{ display: 'flex', alignItems: 'center' }}>
    <Box
      component="img"
      src={assetUrl('/brandlogo/logo-full.svg')}
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
    />
    <Box
      component="img"
      src={assetUrl('/brandlogo/logo-short.svg')}
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
    />
  </Box>
);

export const demoNav = (
  <Navigation
    logo={<FALogo />}
    items={[
      { label: 'FAQ', href: '#' },
      { label: 'Contact Us', href: '#' },
      { label: 'Log in', href: '#' },
    ]}
  />
);
