import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
import { Button } from "../components/ui/button";
import { useLiveCounter } from "../providers/live-provider";

export function HomePage() {
  const { value, running, startCounter, stopCounter } = useLiveCounter();

  return (
    <Card className="border-border card-shadow">
      <CardHeader>
        <CardTitle>Canlı Sayaç</CardTitle>
        <CardDescription>
          Sayaç sunucu tarafından çalışır; başlattıktan sonra diğer sayfalardan anlık izleyebilirsiniz.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center justify-between rounded-md border border-border bg-muted/40 px-4 py-3">
          <div>
            <div className="text-sm text-muted-foreground">Durum</div>
            <div className="text-lg font-semibold text-foreground">
              {running ? "Çalışıyor" : "Beklemede"}
            </div>
          </div>
          <div className="text-right">
            <div className="text-sm text-muted-foreground">Değer</div>
            <div className="text-3xl font-bold text-foreground">{value}</div>
          </div>
        </div>
        <div className="flex gap-3">
          <Button className="flex-1" onClick={startCounter} disabled={running}>
            Sayaçı Başlat
          </Button>
          <Button className="flex-1" variant="outline" onClick={stopCounter} disabled={!running}>
            Durdur
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}