import React from 'react';
import Layout from '@theme/Layout';
import styles from './works.module.css';

const works = [
  {
    name: 'Tundoc',
    description: 'ドキュメント管理ツール。Markdownでドキュメントを管理・公開できる。',
    url: 'https://tundoc.techswan.online/',
    tags: ['Web', 'Documentation'],
  },
  {
    name: 'Playground',
    description: 'AI・LLM関連の実験場。様々なモデルやツールを試せる。',
    url: 'https://playground.techswan.online/',
    tags: ['AI', 'LLM', 'Experiment'],
  },
  // 他のプロジェクトがあれば追加
];

export default function Works(): React.JSX.Element {
  return (
    <Layout
      title="Works"
      description="swallowが作ったもの"
    >
      <main className={styles.main}>
        <div className={styles.container}>
          <h1 className={styles.title}>// Works</h1>
          <p className={styles.subtitle}>作ったもの・関わったもの</p>
          
          <div className={styles.works}>
            {works.map((work, idx) => (
              <a
                key={idx}
                href={work.url}
                target="_blank"
                rel="noopener noreferrer"
                className={styles.workCard}
              >
                <h2 className={styles.workName}>{work.name}</h2>
                <p className={styles.workDescription}>{work.description}</p>
                <div className={styles.workTags}>
                  {work.tags.map((tag, tagIdx) => (
                    <span key={tagIdx} className={styles.workTag}>{tag}</span>
                  ))}
                </div>
              </a>
            ))}
          </div>
        </div>
      </main>
    </Layout>
  );
}
