test tools

import { useState } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Loader } from "lucide-react";

export default function WebsiteAuditTool() {
  const [url, setUrl] = useState("");
  const [loading, setLoading] = useState(false);
  const [report, setReport] = useState(null);

  const auditWebsite = async () => {
    if (!url) return;
    setLoading(true);
    setReport(null);
    
    // Simulate an API request
    setTimeout(() => {
      setReport({
        seo: Math.floor(Math.random() * 100),
        performance: Math.floor(Math.random() * 100),
        security: Math.floor(Math.random() * 100),
        accessibility: Math.floor(Math.random() * 100),
      });
      setLoading(false);
    }, 2000);
  };

  return (
    <div className="max-w-lg mx-auto p-6 space-y-4">
      <h1 className="text-xl font-bold">Free Website Audit Report</h1>
      <div className="flex gap-2">
        <Input
          type="url"
          placeholder="Enter website URL"
          value={url}
          onChange={(e) => setUrl(e.target.value)}
        />
        <Button onClick={auditWebsite} disabled={loading}>
          {loading ? <Loader className="animate-spin" /> : "Audit"}
        </Button>
      </div>
      {report && (
        <Card>
          <CardContent className="p-4 space-y-2">
            <p><strong>SEO:</strong> {report.seo}/100</p>
            <p><strong>Performance:</strong> {report.performance}/100</p>
            <p><strong>Security:</strong> {report.security}/100</p>
            <p><strong>Accessibility:</strong> {report.accessibility}/100</p>
          </CardContent>
        </Card>
      )}
    </div>
  );
}