import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import SystemDetailsExample from '@/components/asset-management/SystemDetailsExample';

const SystemDetailsTest: React.FC = () => {
  const [assetId, setAssetId] = useState<number>(91); // Default to the asset ID from your example

  const handleAssetIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value);
    if (!isNaN(value) && value > 0) {
      setAssetId(value);
    }
  };

  return (
    <div className="container mx-auto p-6 space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>SystemDetails by AssetId API Test</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-4">
            <label htmlFor="assetId" className="text-sm font-medium">
              Asset ID:
            </label>
            <Input
              id="assetId"
              type="number"
              value={assetId}
              onChange={handleAssetIdChange}
              className="w-32"
              min="1"
            />
            <Button 
              onClick={() => setAssetId(91)}
              variant="outline"
              size="sm"
            >
              Reset to 91
            </Button>
          </div>
          
          <div className="text-sm text-muted-foreground">
            <p>This component demonstrates the SystemDetails by AssetId API:</p>
            <code className="bg-muted px-2 py-1 rounded text-xs">
              GET /api/SystemsDetails/by-asset/{assetId}
            </code>
          </div>
        </CardContent>
      </Card>

      <SystemDetailsExample assetId={assetId} />
    </div>
  );
};

export default SystemDetailsTest;