import React, { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { api } from '../../api/client';

export const UserDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const [User, setUser] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadUser = async () => {
      if (!id) return;
      try {
        const data = await api.User.get(id);
        setUser(data);
      } catch (error) {
        console.error('Failed to load User:', error);
      } finally {
        setLoading(false);
      }
    };
    loadUser();
  }, [id]);

  if (loading) return <div>Loading...</div>;
  if (!User) return <div>Not found</div>;

  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">User Details</h1>
        <Link to={`/Users/${id}/edit`} className="btn btn-primary">Edit</Link>
      </div>
      <div className="card p-6">
        <div className="mb-2">
          <strong>{fieldName}:</strong> {User.name}
        </div>
        <div className="mb-2">
          <strong>{fieldName}:</strong> {User.email}
        </div>
        <div className="mb-2">
          <strong>{fieldName}:</strong> {User.role}
        </div>
      </div>
    </div>
  );
};
