---
import MainSection from '@/sections/main/main-section.astro';
import type { MainSection as MainSectionData } from '@/types/main-section';

const mainSectionData: MainSectionData = {
  config: {
    icon: 'fa6-solid:user',
    title: 'About me',
  },
  image: import('@/assets/my-image.jpeg'),
  fullName: 'Mark Freeman',
  role: 'Senior React Developer',
  details: [
    { label: 'Phone', value: '+48 604 343 212' },
    { label: 'Email', value: 'veeeery.long.email.address@gmail.com' },
    { label: 'From', value: 'Warsaw, Poland' },
    { label: 'Salary range', value: '18 000 - 25 000 PLN' },
  ],
  description:
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ac dui at vestibulum. In condimentum metus id dui tincidunt, in blandit mi vehicula. Nulla lacinia, erat sit amet elementum vulputate, lectus mauris volutpat mi, vitae accumsan metus elit ut nunc. Vestibulum lacinia enim eget eros fermentum scelerisque. Proin augue leo, posuere ut imperdiet vitae, fermentum eu ipsum. Sed sed neque sagittis, posuere urna nec, commodo leo. Pellentesque posuere justo vitae massa volutpat maximus.',
  tags: [{ name: 'Open for freelance' }, { name: 'Available for mentoring' }, { name: 'Working on side project' }],
  action: {
    label: 'Download CV',
    url: '#',
  },
  socials: [
    { name: 'Facebook', icon: 'fa6-brands:facebook-f', url: '#' },
    { name: 'GitHub', icon: 'fa6-brands:github', url: '#' },
    { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' },
    { name: 'Twitter', icon: 'fa6-brands:twitter', url: '#' },
  ],
};
---

<body class="flex justify-center bg-gray-50">
  <div class="flex w-full max-w-6xl gap-8 px-2 py-3 sm:px-8 sm:py-12 lg:ml-22 lg:px-16 lg:py-20">
    <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
      <MainSection {...mainSectionData} />
    </main>
  </div>
</body>
