'use client';

import { FileText } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import React from 'react';
import {
    Card,
    Tag,
} from 'antd';
import type { PaginaProjetoType } from './types';
import {
    getEstruturaPaginaTipoColor,
    getEstruturaPaginaVisibilidadeColor} from './estruturaPaginasDisplay';

export interface CardPaginaProps {
    item: PaginaProjetoType & { updated_at?: string };
    onOpenOpcoes?: (item: PaginaProjetoType) => void;
    onView?: (item: PaginaProjetoType) => void;
}

export function CardPagina({ item, onOpenOpcoes, onView }: CardPaginaProps) {
    const handleClick = () => (onOpenOpcoes ? onOpenOpcoes(item) : onView?.(item));
    return (
        <Card
            hoverable
            className="module-card bordered-left"
            style={{ borderLeft: '6px solid #1ab394', marginBottom: 16, cursor: 'pointer' }}
            styles={{ body: { padding: '16px 20px' } }}
            onClick={handleClick}
        >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div style={{ fontWeight: 700, color: '#2c3e50' }}>
                    <FileText size={ICON_SIZE_MD} style={{ marginRight: 8, color: '#1ab394' }} aria-hidden />
                    {item.titulo}
                </div>
                <div style={{ fontSize: 12, color: '#95a5a6', fontFamily: 'monospace' }}>
                    {item.slug}
                </div>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                    <Tag color={getEstruturaPaginaTipoColor(item.tipo)}>{item.tipo}</Tag>
                    <Tag color={getEstruturaPaginaVisibilidadeColor(item.visibilidade)}>
                        {item.visibilidade}
                    </Tag>
                    {item.versao != null && <Tag>v{item.versao}</Tag>}
                </div>
                {item.autor?.nome && (
                    <div style={{ fontSize: 12, color: '#7f8c8d' }}>{item.autor.nome}</div>
                )}
            </div>
        </Card>
    );
}