'use client';

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Card, CardContent } from '@/components/ui/card';
import type { PolicySettingSearchResult } from '@/lib/actions/policySettings';
import { formatDistanceToNow } from 'date-fns';

interface ResultsTableProps {
  results: PolicySettingSearchResult[];
}

export function ResultsTable({ results }: ResultsTableProps) {
  if (results.length === 0) {
    return null;
  }

  return (
    <Card>
      <CardContent className="p-0">
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Setting Name</TableHead>
                <TableHead>Setting Value</TableHead>
                <TableHead>Policy Name</TableHead>
                <TableHead>Policy Type</TableHead>
                <TableHead>Last Synced</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {results.map((result) => (
                <TableRow key={result.id}>
                  <TableCell className="font-medium">
                    {result.settingName}
                  </TableCell>
                  <TableCell className="max-w-xs truncate">
                    {result.settingValue}
                  </TableCell>
                  <TableCell>{result.policyName}</TableCell>
                  <TableCell className="capitalize">
                    {result.policyType.replace(/([A-Z])/g, ' $1').trim()}
                  </TableCell>
                  <TableCell className="text-muted-foreground">
                    {formatDistanceToNow(new Date(result.lastSyncedAt), {
                      addSuffix: true,
                    })}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}