"use client"

import { ArticleType } from '@/app/_lib/data/article';
import ImageUpload from '@/app/_ui/ImageUpload';
import { faArrowLeft, faRibbon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { BackTop, Button, Card, Col, Form, Grid, Input, Row, Upload } from 'antd';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation'

import { useState } from 'react';
const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
export default function Page() {
    const router = useRouter()
    return <>
        <div className='w-full bg-white  p-2  flex gap-x-1 items-center rounded shadow'>
            <div className='flex gap-x-1 items-center text-[#666] hover:text-[#333] cursor-pointer '
                onClick={() => {
                    router?.back()
                }}
            >

                <FontAwesomeIcon icon={faArrowLeft}></FontAwesomeIcon>
                返回

            </div>

        </div>

        <Card title="新增文章" className='mt-2'>
            <Form<ArticleType>>
                <Row gutter={24}>

                    <Col span={12}>
                        <Form.Item label="标题" name={"title"} >
                            <Input />
                        </Form.Item>
                        <Form.Item label="副标题" name={"description"}>
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item label="链接" name={"link"}>
                            <Input />
                        </Form.Item>
                        <Form.Item label="封面" name={"cover"}>
                            <ImageUpload
                                accept="image/*"
                                width={80}
                                height={80}
                            ></ImageUpload>
                        </Form.Item>
                    </Col>
                </Row>


                <Form.Item label="内容" name={"content"}>
                    <MDEditor extraCommands={[
                        {
                            name: 'image',
                            icon: <span>1</span>, // 可以使用图标库的图标
                            execute: () => {

                            }, // 点击时调用插入图片的函数
                        },
                    ]} />
                </Form.Item>
            </Form>

        </Card>
    </>
}