import React from 'react';
import { DataTable } from './components/DataTable';
import { UserNav } from './components/UserNav';

const tasks = [
  {
    id: "TASK-8782",
    title: "You can't compress the program without quantifying the open-source SSD pixel!",
    status: "in progress",
    label: "documentation",
    priority: "medium"
  },
  {
    id: "TASK-7878",
    title: "Try to calculate the EXE feed, maybe it will index the multi-byte pixel!",
    status: "backlog",
    label: "documentation",
    priority: "medium"
  },
  {
    id: "TASK-7839",
    title: "We need to bypass the neural TCP card!",
    status: "todo",
    label: "bug",
    priority: "high"
  },
];

export default function TaskPage() {
  return (
    <div className="min-h-screen bg-white">
      <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Welcome back!</h1>
          <p className="text-sm text-gray-500">Here's a list of your tasks for this month!</p>
        </div>
        <UserNav />
      </div>
      <div className="h-[calc(100vh-80px)]">
        <DataTable data={tasks} />
      </div>
    </div>
  );
}