import React, { useState } from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Slider } from '@/components/ui/slider';

const ModelComparisonInterface = () => {
  const [temperature, setTemperature] = useState(0.7);
  const [input, setInput] = useState('');
  const [outputs, setOutputs] = useState({
    model1: '',
    model2: ''
  });

  return (
    <div className="w-full max-w-4xl p-4">
      <Card className="mb-4">
        <CardHeader>
          <CardTitle>Language Model Comparison</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-2">
                Input Text
              </label>
              <textarea 
                className="w-full h-32 p-2 border rounded"
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="Enter your text here..."
              />
            </div>
            
            <div>
              <label className="block text-sm font-medium mb-2">
                Temperature: {temperature}
              </label>
              <Slider
                value={[temperature]}
                onValueChange={(value) => setTemperature(value[0])}
                min={0}
                max={1}
                step={0.1}
                className="w-full"
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <Card>
                <CardHeader>
                  <CardTitle>Model 1 Output</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="min-h-32 p-2 border rounded bg-gray-50">
                    {outputs.model1 || 'Output will appear here...'}
                  </div>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Model 2 Output</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="min-h-32 p-2 border rounded bg-gray-50">
                    {outputs.model2 || 'Output will appear here...'}
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default ModelComparisonInterface;