'use client';


/**
 * @route /projetos/[id]/desenvolvimento/frontend
 */

import React from 'react';
import { Button, Space } from 'antd';
import { useParams, useRouter } from 'next/navigation';
import ProjetoLayout from '@/components/layouts/ProjetoLayout';
import { OperativeRouteHint } from '@/components/layouts/OperativeRouteHint/OperativeRouteHint';
import { ProjetoEmBreveContent } from '@/components/layouts/ProjetoEmBreve/ProjetoEmBreveContent';

export default function DesenvolvimentoFrontendPage() {
    const params = useParams();
    const router = useRouter();
    const projetoId = params?.id as string;

    return (
        <ProjetoLayout
            projetoId={projetoId}
            pageTitle="Desenvolvimento Frontend"
            titleSection="Desenvolvimento Frontend"
        >
            <OperativeRouteHint
                message="Acompanhamento até ao lançamento desta área"
                description="Enquanto a área dedicada não fica disponível, acompanhe trabalho de interface no Kanban, entregas técnicas e backlog."
            >
                <Space wrap>
                    <Button type="primary" onClick={() => router.push(`/projetos/${projetoId}/kanban`)}>
                        Kanban
                    </Button>
                    <Button onClick={() => router.push(`/projetos/${projetoId}/desenvolvimento/entregas`)}>
                        Entregas técnicas
                    </Button>
                </Space>
            </OperativeRouteHint>
            <ProjetoEmBreveContent
                title="Desenvolvimento Frontend"
                description="HTML/CSS/JS ou React/Vue. Acompanhe as entregas e tarefas de desenvolvimento frontend."
            />
        </ProjetoLayout>
    );
}