import { useAtomValue } from 'jotai';
import { languageState } from '../state/atoms';
import { getTranslations } from '../translations';
import styles from '../styles/components/Projects.module.scss';

const getTagColor = (tag) => {
  const colorMap = {
    '.NET': 'tagDotnet',
    React: 'tagReact',
    SQLite: 'tagSqlite',
    Apache2: 'tagApache',
    'Ubuntu Server': 'tagUbuntu',
    NextCloud: 'tagNextcloud',
    Vite: 'tagVite',
  };
  return colorMap[tag] || 'tagDefault';
};

export default function Projects() {
  const language = useAtomValue(languageState);
  const t = getTranslations(language);

  return (
    <section id="projects" className={styles.projects}>
      <div className={styles.inner}>
        <div className={styles.header}>
          <span className={styles.sectionNum}>{t.projects.sectionNum}</span>
          <h2 className={styles.sectionTitle}>{t.projects.sectionTitle}</h2>
          <div className={styles.line} />
        </div>

        <div className={styles.grid}>
          {t.projects.projects.map((p) => (
            <article key={p.name} className={styles.card}>
              <div className={styles.cardTop}>
                <span className={styles.folderIcon}>{t.projects.folderIcon}</span>
                <div className={styles.cardLinks}>
                  <a href={p.href} className={styles.externalLink} aria-label={`${t.projects.externalLinkAria} ${p.name}`}>
                    ↗
                  </a>
                  <a href={p.sourceHref} className={styles.sourceLink} aria-label={`${t.projects.sourceLinkAria} ${p.name}`}>
                    📦
                  </a>
                </div>
              </div>
              <h3 className={styles.cardName}>{p.name}</h3>
              <p className={styles.cardDesc}>{p.desc}</p>
              <ul className={styles.tags}>
                {p.tags.map((tag) => (
                  <li key={tag} className={styles.tagItem}>
                    <span className={`${styles.tagPill} ${styles[getTagColor(tag)]}`}>{tag}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
        <div className={styles.giteaLink}>
          <p className={styles.giteaText}>{t.projects.giteaText}</p>
          <a href="https://gitea.tietokonepaja.fi/" className={styles.giteaBtn} target="_blank" rel="noreferrer">
            {t.projects.giteaBtn}
          </a>
        </div>
      </div>
    </section>
  );
}