"use client";

import { useState } from "react";
import { Task } from "@/types/task";
import { Project } from "@/types/project";
import { TaskHeader } from "./task-header";
import { TaskStats } from "./task-stats";
import { TaskInfo } from "./task-info";

interface TaskDetailViewProps {
  initialTask: Task;
  project: Project | null;
}

export function TaskDetailView({ initialTask, project }: TaskDetailViewProps) {
  const [task, setTask] = useState<Task>(initialTask);

  const handleTaskUpdated = (updatedTask: Task) => {
    setTask(updatedTask);
  };

  return (
    <div className="flex flex-col min-h-screen">
      {/* Header con breadcrumb, título, badges y acciones */}
      <TaskHeader 
        task={task} 
        project={project} 
        onTaskUpdated={handleTaskUpdated}
      />
      
      {/* Contenido principal */}
      <div className="flex-1 p-6 space-y-6">
        {/* Estadísticas rápidas */}
        <TaskStats task={task} />
        
        {/* Información detallada */}
        <TaskInfo task={task} project={project} />
      </div>
    </div>
  );
}