---
import WorkTimelineItem from '@/sections/experience/work-timeline-item.astro';
import type { Job } from '@/types/experience-section';
import type { I18n } from '@/types/i18n';

const job: Job = {
  role: 'Senior front-end developer',
  company: 'Google',
  startDate: new Date('2020-02'),
  endDate: null,
  description: [
    'In tristique vulputate augue vel egestas.',
    'Quisque ac imperdiet tortor, at lacinia ex.',
    'Duis vel ex hendrerit, commodo odio sed, aliquam enim.',
    'Ut arcu nulla, tincidunt eget arcu eget, molestie vulputate nisi.',
    'Nunc malesuada leo et est iaculis facilisis.',
    'Fusce eu urna ut magna malesuada fringilla.',
  ],
  tags: [
    {
      icon: 'simple-icons:react',
      iconColor: '#61DAFB',
      name: 'React.js',
      url: 'https://reactjs.org/',
    },
    {
      icon: 'simple-icons:nextdotjs',
      iconColor: '#000000',
      name: 'Next.js',
      url: 'https://nextjs.org/',
    },
    {
      icon: 'simple-icons:typescript',
      iconColor: '#3178C6',
      name: 'TypeScript',
      url: 'https://www.typescriptlang.org/',
    },
    {
      icon: 'simple-icons:nx',
      iconColor: '#143055',
      name: 'Nx',
      url: 'https://nx.dev/',
    },
    {
      icon: 'simple-icons:firebase',
      iconColor: '#FFCA28',
      name: 'Firebase',
      url: 'https://firebase.google.com/',
    },
  ],
  socials: [
    { name: 'Facebook', icon: 'fa6-brands:facebook-f', url: '#' },
    { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' },
  ],
};

const i18nData: I18n = {
  locale: 'en-US',
  translations: {
    now: 'now',
  },
};
---

<div class="p-5">
  <WorkTimelineItem job={job} i18n={i18nData} />
</div>
