"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { RefreshCw } from "lucide-react";
import { SubstitutionData } from "@/lib/types";
import { Button } from "@/components/ui/button";

interface UpdateStatusProps {
  data: SubstitutionData | null;
}

export default function UpdateStatus({ data }: UpdateStatusProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  if (!data) return null;

  const handleRefresh = () => {
    startTransition(() => {
      router.refresh();
    });
  };

  return (
    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-sm text-muted-foreground p-4 rounded-lg border">
      <div>
        <span className="font-medium">Poslední aktualizace:</span> {data.status.lastUpdated}
        <span className="mx-2 hidden sm:inline">•</span>
        <br className="sm:hidden" />
        <span>
          Aktualizace každých{" "}
          {data.status.currentUpdateSchedule < 60
            ? `${data.status.currentUpdateSchedule} min`
            : `${data.status.currentUpdateSchedule / 60} hod`}
        </span>
      </div>
      <Button
        variant="outline"
        size="sm"
        onClick={handleRefresh}
        disabled={isPending}
        className="w-full sm:w-auto"
      >
        <RefreshCw
          className={`h-4 w-4 mr-2 ${isPending ? "animate-spin" : ""}`}
        />
        Aktualizovat
      </Button>
    </div>
  );
}