"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";

interface MetarTableProps {
  data: any[];
  loading: boolean;
}

export function MetarTable({ data, loading }: MetarTableProps) {
  if (loading) {
    return <LoadingSkeleton />;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Airport</TableHead>
          <TableHead>Conditions</TableHead>
          <TableHead>RWY</TableHead>
          <TableHead>Wind (°/kts)</TableHead>
          <TableHead>Headwind (kts)</TableHead>
          <TableHead>Xwind (kts)</TableHead>
          <TableHead>Altimeter</TableHead>
          <TableHead>METAR</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((row, index) => (
          <TableRow key={index}>
            <TableCell className="font-medium">{row.airport}</TableCell>
            <TableCell className={`text-${row.flightRulesClass}`}>
              {row.flightRules}
            </TableCell>
            <TableCell className={row.runwayClass}>{row.bestRunway}</TableCell>
            <TableCell>{row.wind}</TableCell>
            <TableCell className={`wind-${row.headwindClass}`}>
              {row.headwind}
            </TableCell>
            <TableCell className={`wind-${row.crosswindClass}`}>
              {row.crosswind}
            </TableCell>
            <TableCell>{row.altimeter}</TableCell>
            <TableCell className="font-mono text-sm">{row.metar}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

function LoadingSkeleton() {
  return (
    <div className="space-y-3 p-4">
      {Array.from({ length: 5 }).map((_, i) => (
        <div key={i} className="flex gap-4">
          <Skeleton className="h-4 w-[100px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[60px]" />
          <Skeleton className="h-4 w-[100px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[80px]" />
          <Skeleton className="h-4 w-[200px]" />
        </div>
      ))}
    </div>
  );
}