'use client'

import { Button, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
import Hero from '@/components/Hero'
import QSelect from '@/components/ui/QSelect'
import styles from './changelog.module.css'
import { get } from '@/lib/Axios'

export default function changelogPage() {
  const testVar = process.env.NEXT_PUBLIC_TEST

  const handleUsers = async () => {
    const users = await get('/api/user/find-all')
    console.log(users)
  }

  const data = [
    {
      id: 1,
      author: 'SWYOO',
      contents: '버튼 정리(템플릿 적용)',
      date: '2024.07.16',
    },
    {
      id: 2,
      author: 'SWYOO',
      contents: 'README.md 파일 이미지 경로 수정',
      date: '2024.07.17',
    },
    {
      id: 3,
      author: 'SWYOO',
      contents: '',
      date: '',
    },
  ]
  return (
    <>
      <Hero title="Change log" />
      <div className={styles.test}>이 영역은 테스트입니다.</div>
      <div>
        <Table isStriped>
          <TableHeader>
            <TableColumn>DATE</TableColumn>
            <TableColumn>NAME</TableColumn>
            <TableColumn>CONTENTS</TableColumn>
          </TableHeader>
          <TableBody>
            {data.map((item) => (
              <TableRow key={item.id}>
                <TableCell>{item.date}</TableCell>
                <TableCell>{item.author}</TableCell>
                <TableCell>{item.contents}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <div className="m-2">
        <QSelect />
      </div>
      <div className="w-full bg-orange-300 m-2">{testVar}</div>
      <div>
        <div className="m-2">
          <Button onClick={handleUsers}>Button</Button>
        </div>
      </div>
      <div className="test">
        <p className="text-white">Sass 테스트입니다.</p>
      </div>
    </>
  )
}