import { trpc } from '@/lib/trpc';

type ProjectDetailProps = {
  projectId: string;
};

export function ProjectDetail({ projectId }: ProjectDetailProps) {
  const { data: project, isLoading } = trpc.projects.get.useQuery({ id: projectId });

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
        Loading project...
      </div>
    );
  }

  if (!project) {
    return (
      <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
        Project not found
      </div>
    );
  }

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-semibold text-foreground">{project.name}</h1>
      <p className="text-sm text-muted-foreground mt-1">
        Project detail view will be implemented in US-013.
      </p>
    </div>
  );
}