'use client';

import React from 'react';
import { useT } from '@/i18n';
import AnimateOnScroll from '@/components/AnimateOnScroll';
import s from '../content.module.css';

export default function BlogPage() {
  const t = useT();
  const posts = [
    { icon: '\u{1F680}', dateKey: 'blog_p1_date', titleKey: 'blog_p1_title', excerptKey: 'blog_p1_excerpt' },
    { icon: '\u{26D3}', dateKey: 'blog_p2_date', titleKey: 'blog_p2_title', excerptKey: 'blog_p2_excerpt' },
    { icon: '\u{1F4B0}', dateKey: 'blog_p3_date', titleKey: 'blog_p3_title', excerptKey: 'blog_p3_excerpt' },
    { icon: '\u{2B50}', dateKey: 'blog_p4_date', titleKey: 'blog_p4_title', excerptKey: 'blog_p4_excerpt' },
    { icon: '\u{1F916}', dateKey: 'blog_p5_date', titleKey: 'blog_p5_title', excerptKey: 'blog_p5_excerpt' },
    { icon: '\u{1F30F}', dateKey: 'blog_p6_date', titleKey: 'blog_p6_title', excerptKey: 'blog_p6_excerpt' },
  ];
  return (
    <>
      <section className={s.hero}>
        <h1 className={s.title}>{t('blog_title')}</h1>
        <p className={s.subtitle}>{t('blog_subtitle')}</p>
      </section>
      <div className={s.grid}>
        {posts.map((p, i) => (
          <AnimateOnScroll key={p.titleKey} delay={i * 0.1}>
            <div className={s.blogCard}>
              <div className={s.blogThumb}>{p.icon}</div>
              <div className={s.blogBody}>
                <div className={s.blogDate}>{t(p.dateKey)}</div>
                <h3 className={s.blogTitle}>{t(p.titleKey)}</h3>
                <p className={s.blogExcerpt}>{t(p.excerptKey)}</p>
              </div>
            </div>
          </AnimateOnScroll>
        ))}
      </div>
    </>
  );
}
