'use client';

import { ArticleCard } from '@/components/article-card';
import { Breadcrumbs } from '@/components/breadcrumbs';
import { useI18n } from '@/lib/i18n';
import type { Article } from '@/lib/types';

const groups = ['Chọn dụng cụ', 'Học móc len', 'Sản phẩm đầu tiên'] as const;

export function GuidesPage({ articles }: { articles: Article[] }) {
  const { language, t } = useI18n();
  const groupLabels: Record<(typeof groups)[number], string> = { 'Chọn dụng cụ': 'Choose your tools', 'Học móc len': 'Learn crochet', 'Sản phẩm đầu tiên': 'First project' };
  const headingKeys: Record<(typeof groups)[number], string> = { 'Chọn dụng cụ': 'guides.toolsHeading', 'Học móc len': 'guides.learnHeading', 'Sản phẩm đầu tiên': 'guides.firstHeading' };
  return (
    <>
      <div className="page-container"><Breadcrumbs items={[{ name: 'Trang chủ', href: '/' }, { name: 'Hướng dẫn' }]} /></div>
      <section className="page-intro"><div className="page-container"><span className="eyebrow">{t('guides.eyebrow')}</span><h1>{t('guides.title')}</h1><p>{t('guides.description')}</p></div></section>
      {groups.map((group) => {
        const items = articles.filter((article) => article.category === group);
        return <section className="section-space-sm" key={group}><div className="page-container"><div className="section-heading-row"><div><span className="eyebrow">{language === 'en' ? groupLabels[group] : group}</span><h2 className="section-title">{t(headingKeys[group])}</h2></div></div><div className="article-grid">{items.map((article) => <ArticleCard article={article} key={article.id} />)}</div></div></section>;
      })}
    </>
  );
}