Add Bulgarian translation and language toggle

[Lutherwaves]

Add internationalization (i18n) with English and Bulgarian support, including a language toggle and translated content.

---

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[Lutherwaves]

✅ Deploy Preview for debugmydinner ready!

Name	Link
🔨 Latest commit	77e1b7a
🔍 Latest deploy log	https://app.netlify.com/projects/debugmydinner/deploys/68b2e0dd9e15e60008e0b8ad
😎 Deploy Preview	https://deploy-preview-15--debugmydinner.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 49 Accessibility: 98 Best Practices: 83 SEO: 100 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Lutherwaves]

@cursoragent this button should be in the header navigation on the opposite side of the pogo. Currently it is not visible

[cursor]

I refactored the Header component in src/components/sections/Header/index.tsx to improve the responsive display of the language toggle and simplify mobile menu rendering. I encapsulated the LanguageToggle within a new div and removed conditional rendering for the MobileMenu.

• I wrapped the LanguageToggle component within a new div across all Header variations (e.g., HeaderLogoLeftPrimaryLeft, HeaderLogoCenteredPrimaryCentered) in src/components/sections/Header/index.tsx. This new container applies responsive classes like hidden lg:flex lg:items-center and ml-auto (or ml-10) to control its visibility and alignment on larger screens.
• I removed the conditional rendering {(primaryLinks.length > 0 || secondaryLinks.length > 0) && ...} for the MobileMenu component, ensuring it is always rendered in src/components/sections/Header/index.tsx.

---

_{Learn more about Cursor Agents}

[Lutherwaves]

@cursoragent i still dont see the toggle

[cursor]

I ensured the language toggle is always visible in the header and the mobile menu consistently renders. I also added temporary styling to the language toggle.

• I made the LanguageToggle always visible by removing hidden lg:flex from its container div in all header variations (src/components/sections/Header/index.tsx).
• I ensured the MobileMenu in HeaderLogoLeftPrimaryCentered (same file) always renders by removing its conditional check.
• I added temporary border border-red-500 bg-yellow-200 p-2 styling to the LanguageToggle component (src/components/atoms/LanguageToggle.tsx) for debugging.

---

_{Learn more about Cursor Agents}

[Lutherwaves]

@cursoragent I see the button now, but switching doesnt change the language. Also can you make the visuals blend better with the website

[cursor]

I refactored the language toggle to use buttons and router.push for dynamic locale switching, enhancing control. I also ensured next-i18next translations are properly initialized on the main page.

• In src/components/atoms/LanguageToggle.tsx, I replaced next/link with button elements. I added a changeLanguage function utilizing router.push(pathname, asPath, { locale: newLocale }) for programmatic language updates and refined the button styling.
• In src/pages/[[...slug]].js, I imported useTranslation and called useTranslation(['common', 'recipes']) within the Page component to initialize translations.

---

_{Learn more about Cursor Agents}

[Lutherwaves]

Ok the button styling is good now make it work, it should change the whole sites language to bg or en based on the button by using the translations and changing the files it loads for the recipes. If bg point to bulgarian recipes, if en point to rnglish ones. You can also simply

Move the current english version to /cooks/en and the bulgarian ones to /cooks/bg and the button simply navigates between these two. Dont forget to have the default redirect to en @cursoragent