Personal Decision Support Tool

import React, { useState } from 'react';
import { Card, CardContent } from "@/components/ui/card";

const DecisionSupportTool = () => {
  const [factors, setFactors] = useState([
    { name: 'Financial Impact', weight: 5, score: 0 },
    { name: 'Time Investment', weight: 4, score: 0 },
    { name: 'Personal Growth', weight: 3, score: 0 },
    { name: 'Work-Life Balance', weight: 4, score: 0 }
  ]);

  const handleScoreChange = (index, value) => {
    const newFactors = [...factors];
    newFactors[index].score = parseInt(value);
    setFactors(newFactors);
  };

  const calculateTotal = () => {
    return factors.reduce((acc, factor) => 
      acc + (factor.weight * factor.score), 0
    );
  };

  return (
    <Card className="w-full max-w-2xl p-6">
      <h2 className="text-2xl font-bold mb-4">Decision Evaluation Tool</h2>
      <div className="space-y-4">
        {factors.map((factor, index) => (
          <div key={factor.name} className="flex items-center space-x-4">
            <div className="w-40">{factor.name}</div>
            <div className="text-sm text-gray-500">Weight: {factor.weight}</div>
            <input
              type="range"
              min="0"
              max="10"
              value={factor.score}
              onChange={(e) => handleScoreChange(index, e.target.value)}
              className="w-40"
            />
            <div className="w-8">{factor.score}</div>
          </div>
        ))}
        <div className="pt-4 border-t">
          <div className="font-bold">
            Total Score: {calculateTotal()}
          </div>
          <div className="text-sm text-gray-500 mt-2">
            {calculateTotal() > 120 ? "Strong positive indication" :
             calculateTotal() > 80 ? "Moderately positive" :
             calculateTotal() > 40 ? "Consider carefully" :
             "May need reassessment"}
          </div>
        </div>
      </div>
    </Card>
  );
};

export default DecisionSupportTool;