"use client";

import Link from "next/link";
import { ArrowLeft, PencilIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { PageError } from "@/components/page-error";
import { PageLoader } from "@/components/page-loader";
import { TaskViewSwitcher } from "@/features/tasks/components/task-view-switcher";
import { useWorkspaceId } from "@/features/workspaces/hooks/use-workspace-id";
import { useProjectId } from "@/features/projects/hooks/use-project-id";
import { useBoardId } from "@/features/boards/hooks/use-board-id";
import { useGetBoard } from "@/features/boards/api/use-get-board";

interface BoardIdClientProps {}

export const BoardIdClient = ({}: BoardIdClientProps) => {
  const workspaceId = useWorkspaceId();
  const projectId = useProjectId();
  const boardId = useBoardId();
  
  const { data: board, isLoading, error } = useGetBoard({ boardId });
  
  if (isLoading) {
    return <PageLoader />;
  }
  
  if (error || !board) {
    return <PageError message="Board not found" />;
  }
  
  return (
    <div className="flex flex-col">
      <div className="space-y-4">
        <div className="space-y-2">
          <h1 className="text-2xl font-bold">{board.name}</h1>
          {board.description && (
            <p className="text-muted-foreground">{board.description}</p>
          )}
        </div>
        <TaskViewSwitcher hideProjectFilter boardId={boardId} />
      </div>
    </div>
  );
}; 