import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { trails } from '@/lib/data';
import Image from 'next/image';
import { PostForm } from '@/components/post-form';

export default function AdminPostsPage() {
  return (
    <Card>
      <CardHeader className="flex flex-row justify-between items-center">
        <div>
            <CardTitle>Posts</CardTitle>
            <CardDescription>Manage your recent rides and photos.</CardDescription>
        </div>
        <PostForm />
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="hidden w-[100px] sm:table-cell">
                <span className="sr-only">Image</span>
              </TableHead>
              <TableHead>Name</TableHead>
              <TableHead>Location</TableHead>
              <TableHead className="hidden md:table-cell">Difficulty</TableHead>
              <TableHead className="hidden md:table-cell">Length</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {trails.map((trail) => (
              <TableRow key={trail.id}>
                <TableCell className="hidden sm:table-cell">
                  {trail.imageUrl && (
                    <Image
                      alt={trail.name}
                      className="aspect-square rounded-md object-cover"
                      height="64"
                      src={trail.imageUrl}
                      width="64"
                      data-ai-hint={trail.imageHint}
                    />
                  )}
                </TableCell>
                <TableCell className="font-medium">{trail.name}</TableCell>
                <TableCell>
                    {trail.location}
                </TableCell>
                <TableCell className="hidden md:table-cell">
                  <Badge variant={trail.difficulty === 'Advanced' ? 'destructive' : trail.difficulty === 'Intermediate' ? 'secondary': 'default'}>
                    {trail.difficulty}
                  </Badge>
                </TableCell>
                <TableCell className="hidden md:table-cell">
                  {trail.length}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}