import { useState } from "react";
import { Button } from "@/components/ui/button";
import ApiResponse from "@/components/ApiResponse";
import { krowSDK } from "@/api/krowSDK";

const GetMe = () => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleGetMe = async () => {
    setLoading(true);
    setError(null);
    setResponse(null);
    try {
      const res = await krowSDK.auth.me();
      setResponse(res);
    } catch (err) {
      setError(err.response?.data || err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1 className="text-3xl font-bold text-slate-900 mb-4">Get Me</h1>
      <p className="text-slate-600 mb-6">Fetches the currently authenticated user's profile.</p>
      
      <Card className="max-w-2xl">
        <CardHeader>
          <CardTitle>Test `/auth/me`</CardTitle>
        </CardHeader>
        <CardContent>
          <Button onClick={handleGetMe} disabled={loading}>
            {loading ? "Loading..." : "Execute"}
          </Button>
        </CardContent>
      </Card>

      <ApiResponse response={response} error={error} loading={loading} />
    </div>
  );
};

// We need to re-import Card components because they are not globally available.
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

export default GetMe;