import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Search } from "lucide-react";

export default function ClientTasksPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Tasks Management</h1>
        <p className="text-muted-foreground">View assigned tasks and manage your requests.</p>
      </div>

      <Tabs defaultValue="assigned" className="space-y-6">
        <TabsList>
          <TabsTrigger value="assigned">Assigned Tasks</TabsTrigger>
          <TabsTrigger value="new-request">New Request</TabsTrigger>
          <TabsTrigger value="my-requests">My Requests</TabsTrigger>
        </TabsList>

        <TabsContent value="assigned" className="space-y-4">
          <div className="relative max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input placeholder="Search tasks..." className="pl-9" />
          </div>
          <div className="text-center py-12 text-muted-foreground bg-muted/50 rounded-xl border border-dashed">
            <p>No assigned tasks found.</p>
          </div>
        </TabsContent>

        <TabsContent value="new-request">
          <div className="text-center py-12 text-muted-foreground bg-muted/50 rounded-xl border border-dashed">
            <p>Task request form coming soon.</p>
          </div>
        </TabsContent>

        <TabsContent value="my-requests">
          <div className="text-center py-12 text-muted-foreground bg-muted/50 rounded-xl border border-dashed">
            <p>No submitted requests.</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}
