import { Search } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import { Logo } from '@/components/logo';
import { Card, CardContent } from './ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';

export function FileBrowserSkeleton() {
  return (
    <div className="grid md:grid-cols-[280px_1fr] h-screen w-full bg-background font-body text-foreground animate-pulse">
      <aside className="hidden md:flex flex-col border-r bg-card">
        <div className="p-4 border-b">
          <Logo />
        </div>
        <div className="flex-1 overflow-auto py-2 p-4 space-y-2">
            <Skeleton className="h-8 w-full" />
            <Skeleton className="h-8 w-full" />
            <div className="pl-6 space-y-2">
                <Skeleton className="h-8 w-full" />
            </div>
            <Skeleton className="h-8 w-full" />
        </div>
      </aside>

      <div className="flex flex-col">
        <header className="flex h-16 items-center gap-4 border-b bg-card px-6">
          <Skeleton className="h-10 w-10 md:hidden" />
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
            <Skeleton className="pl-10 h-10 w-full" />
          </div>
          <Skeleton className="h-10 w-32" />
        </header>

        <main className="flex-1 overflow-auto p-6 space-y-4">
          <div className="flex items-center gap-2">
             <Skeleton className="h-5 w-24" />
          </div>
          <Skeleton className="h-8 w-48" />
          <Card className="shadow-sm">
            <CardContent className="p-0">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead className="w-2/5"><Skeleton className="h-5 w-20" /></TableHead>
                            <TableHead><Skeleton className="h-5 w-24" /></TableHead>
                            <TableHead className="text-right w-[100px]"><Skeleton className="h-5 w-16" /></TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {[...Array(5)].map((_, i) => (
                             <TableRow key={i}>
                                <TableCell><Skeleton className="h-6 w-full" /></TableCell>
                                <TableCell><Skeleton className="h-6 w-full" /></TableCell>
                                <TableCell><Skeleton className="h-10 w-10" /></TableCell>
                             </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CardContent>
          </Card>
        </main>
      </div>
    </div>
  );
}