← back to Goodquestion

src/components/swot/ScoreCard.tsx

109 lines

'use client'

import { CheckCircle, XCircle, AlertTriangle } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import type { SWOTAnalysis } from '@/types/swot'

interface ScoreCardProps {
  analysis: SWOTAnalysis
}

export function ScoreCard({ analysis }: ScoreCardProps) {
  const getRecommendationIcon = () => {
    switch (analysis.recommendation) {
      case 'go':
        return <CheckCircle className="h-24 w-24 text-green-500" />
      case 'no-go':
        return <XCircle className="h-24 w-24 text-red-500" />
      case 'proceed-with-caution':
        return <AlertTriangle className="h-24 w-24 text-yellow-500" />
    }
  }

  const getRecommendationText = () => {
    switch (analysis.recommendation) {
      case 'go':
        return 'GOOD BUSINESS IDEA'
      case 'no-go':
        return 'NOT A GOOD BUSINESS IDEA'
      case 'proceed-with-caution':
        return 'PROCEED WITH CAUTION'
    }
  }

  const getRecommendationColor = () => {
    switch (analysis.recommendation) {
      case 'go':
        return 'text-green-600 border-green-500'
      case 'no-go':
        return 'text-red-600 border-red-500'
      case 'proceed-with-caution':
        return 'text-yellow-600 border-yellow-500'
    }
  }

  const getScoreColor = () => {
    if (analysis.overallScore >= 70) return 'text-green-600'
    if (analysis.overallScore >= 50) return 'text-yellow-600'
    return 'text-red-600'
  }

  return (
    <Card className={`border-4 ${getRecommendationColor()}`}>
      <CardHeader className="text-center">
        <div className="flex justify-center mb-4">
          {getRecommendationIcon()}
        </div>
        <CardTitle className={`text-4xl font-bold ${getRecommendationColor()}`}>
          {getRecommendationText()}
        </CardTitle>
        <CardDescription className="text-lg mt-2">
          {analysis.businessName} - {analysis.businessType}
        </CardDescription>
        <div className="mt-4">
          <div className={`text-6xl font-bold ${getScoreColor()}`}>
            {analysis.overallScore}
          </div>
          <div className="text-sm text-muted-foreground mt-1">
            Viability Score (out of 100)
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="bg-muted/50 rounded-lg p-6">
          <h4 className="font-semibold mb-2">Analysis Summary</h4>
          <p className="text-sm leading-relaxed">
            {analysis.recommendationReasoning}
          </p>
        </div>
        <div className="grid grid-cols-4 gap-4 mt-6">
          <div className="text-center">
            <div className="text-2xl font-bold text-green-600">
              {analysis.strengths.length}
            </div>
            <div className="text-xs text-muted-foreground">Strengths</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-red-600">
              {analysis.weaknesses.length}
            </div>
            <div className="text-xs text-muted-foreground">Weaknesses</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-blue-600">
              {analysis.opportunities.length}
            </div>
            <div className="text-xs text-muted-foreground">Opportunities</div>
          </div>
          <div className="text-center">
            <div className="text-2xl font-bold text-orange-600">
              {analysis.threats.length}
            </div>
            <div className="text-xs text-muted-foreground">Threats</div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}