"use client";
import { SquareArrowOutUpRight } from 'lucide-react';
import React from 'react';
import { Button } from './ui/button';

const projects = [
  {
    name: 'EPC 2025 Broadcast Manager',
    url: 'https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD',
    desc: 'ADOFAI is web-scale',
    detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
    tags: ['React', 'ElysiaJS'],
  },
  {
    name: 'newsletter',
    url: 'https://github.com/imnyang/newsletter',
    desc: 'For Memos',
    detail: '그저 이메일이 오면 Discord 웹훅으로 포워딩합니다.',
    tags: ['Rust', 'IMAP']
  },
  {
    name: 'memos-rss',
    url: 'https://github.com/imnyang/memos-rss',
    desc: 'For Memos',
    detail: 'Discord 포럼 채널에 RSS 피드에 올라온 내용을 포워딩합니다.',
    tags: ['Rust', 'Discord Bot', 'RSS']
  },
  {
    name: 'today.isangjeong',
    url: 'https://instagram.com/today.isangjeong',
    desc: 'Instagram Bot',
    detail: '매일 학교의 급식 메뉴를 자동으로 업로드하는 인스타그램 봇입니다.',
    tags: ['TypeScript', 'Instagram', '@napi-rs/canvas']
  }
];

export default function Projects() {
  const [visibleCount, setVisibleCount] = React.useState(3);

  return (
    <section className="break-keep break-words w-full">
      <div className="space-y-8">
        {projects.slice(0, visibleCount).map((project, idx) => (
          <div className="space-y-2" key={idx}>
            <div className="space-y-1">
              <div className="flex justify-between items-center gap-y-2 gap-x-4">
                {project.url ? (
                  <a href={project.url} target="_blank" rel="noopener noreferrer" className="text-lg text-nowrap items-center gap-x-2 flex flex-row">
                    {project.name}
                    <SquareArrowOutUpRight size={16} />
                  </a>
                ) : (
                  <span className="text-lg">{project.name}</span>
                )}
                <span className="text-sm text-muted-foreground text-nowrap">{project.desc}</span>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">{project.detail}</p>
              </div>
            </div>
            <div className="flex gap-2 *:bg-muted *:px-2 *:py-0.5 *:rounded *:text-xs *:font-medium *:text-muted-foreground">
              {project.tags.map((tag, i) => (
                <span key={i}>{tag}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      {visibleCount < projects.length && (
        <Button
          onClick={() => setVisibleCount(visibleCount + 3)}
          className="mt-6 bg-muted text-muted-foreground rounded font-medium text-sm hover:bg-muted/80"
        >
          더 불러오기
        </Button>
      )}
    </section>
  );
}