import React from 'react';

export default function KnowledgeCard({ title, description, documents, date, access }) {
    return (
        <div className='col-sm-6 col-md-6 col-lg-4 col-xl-3'>
            <div className='knowledge-card card shadow border-0'>
                <div className='card-body'>
                    <h5 className='card-title'>{title}</h5>
                    <div className='hoverdown position-absolute end-0 top-0'>
                        <button type='button' className='detail-btn btn'>
                            <svg xmlns='http://www.w3.org/2000/svg' height='20' width='5' viewBox='0 0 128 512'>
                                <path d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z' />
                            </svg>
                        </button>
                        <ul class='hoverdown-menu shadow bg-white p-1 rounded'>
                            <li className='p-1 hoverdown-item px-2'>
                                删除
                                <svg
                                    t='1740778468968'
                                    className='icon'
                                    viewBox='0 0 1024 1024'
                                    version='1.1'
                                    xmlns='http://www.w3.org/2000/svg'
                                    p-id='2707'
                                    width='16'
                                    height='16'
                                >
                                    <path
                                        d='M896 298.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667z'
                                        p-id='2708'
                                    ></path>
                                    <path
                                        d='M725.333333 981.333333H298.666667c-72.533333 0-128-55.466667-128-128V256c0-25.6 17.066667-42.666667 42.666666-42.666667s42.666667 17.066667 42.666667 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666667 42.666667h426.666666c25.6 0 42.666667-17.066667 42.666667-42.666667V256c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666666 42.666667v597.333333c0 72.533333-55.466667 128-128 128zM682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V170.666667c0-25.6-17.066667-42.666667-42.666667-42.666667h-170.666666c-25.6 0-42.666667 17.066667-42.666667 42.666667v85.333333c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666666-42.666667V170.666667c0-72.533333 55.466667-128 128-128h170.666666c72.533333 0 128 55.466667 128 128v85.333333c0 25.6-17.066667 42.666667-42.666666 42.666667z'
                                        p-id='2709'
                                    ></path>
                                </svg>
                            </li>
                        </ul>
                    </div>
                    <p className='card-text text-muted'>{description}</p>
                    <div className='text-muted d-flex align-items-center gap-1'>
                        <svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 384 512'>
                            <path
                                fill='#737373'
                                d='M320 464c8.8 0 16-7.2 16-16l0-288-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0zM0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z'
                            />
                        </svg>
                        {documents} 文档
                        <span className='ms-3 d-flex align-items-center gap-1'>
                            <svg xmlns='http://www.w3.org/2000/svg' height='16' width='16' viewBox='0 0 512 512'>
                                <path
                                    fill='#737373'
                                    d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'
                                />
                            </svg>
                            {date}
                        </span>
                    </div>
                    <div className='mt-3 d-flex justify-content-between align-items-end'>
                        {access === 'full' ? (
                            <span className='badge bg-success-subtle d-flex align-items-center gap-1'>
                                <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    height='14'
                                    width='14'
                                    viewBox='0 0 512 512'
                                    fill='currentColor'
                                >
                                    <path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z' />
                                </svg>
                                完全访问
                            </span>
                        ) : access === 'read' ? (
                            <span className='badge bg-primary-subtle d-flex align-items-center gap-1'>
                                <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    height='14'
                                    width='15.75'
                                    viewBox='0 0 576 512'
                                    fill='currentColor'
                                >
                                    <path d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z' />
                                </svg>
                                只读访问
                            </span>
                        ) : (
                            <span className='badge bg-dark-subtle d-flex align-items-center gap-1'>
                                <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    height='14'
                                    width='12.25'
                                    viewBox='0 0 448 512'
                                    fill='currentColor'
                                >
                                    <path d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z' />
                                </svg>
                                无访问权限
                            </span>
                        )}
                        {access === 'full' || access === 'read' ? (
                            <button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
                                <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    height='14'
                                    width='14'
                                    viewBox='0 0 512 512'
                                    fill='currentColor'
                                >
                                    <path d='M168.2 384.9c-15-5.4-31.7-3.1-44.6 6.4c-8.2 6-22.3 14.8-39.4 22.7c5.6-14.7 9.9-31.3 11.3-49.4c1-12.9-3.3-25.7-11.8-35.5C60.4 302.8 48 272 48 240c0-79.5 83.3-160 208-160s208 80.5 208 160s-83.3 160-208 160c-31.6 0-61.3-5.5-87.8-15.1zM26.3 423.8c-1.6 2.7-3.3 5.4-5.1 8.1l-.3 .5c-1.6 2.3-3.2 4.6-4.8 6.9c-3.5 4.7-7.3 9.3-11.3 13.5c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c5.1 0 10.2-.3 15.3-.8l.7-.1c4.4-.5 8.8-1.1 13.2-1.9c.8-.1 1.6-.3 2.4-.5c17.8-3.5 34.9-9.5 50.1-16.1c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9zM144 272a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm144-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm80 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z' />
                                </svg>
                                新聊天
                            </button>
                        ) : (
                            <button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
                                <svg
                                    xmlns='http://www.w3.org/2000/svg'
                                    height='14'
                                    width='14'
                                    viewBox='0 0 512 512'
                                    fill='currentColor'
                                >
                                    <path d='M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391c-4.5 4.5-7 10.6-7 17l0 80c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24l0-40 40 0c6.4 0 12.5-2.5 17-7l33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z' />
                                </svg>
                                申请权限
                            </button>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}