import { Heart, TrendingUp } from "lucide-react";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface AnalysisResult {
  ejectionFraction: number;
  heartFunction: "normal" | "mildly dysfunction" | "heart failure";
}

interface ResultsDisplayProps {
  results: AnalysisResult;
}

const getStatusClass = (status: string) => {
  switch (status) {
    case "normal":
      return "status-normal";
    case "mildly dysfunction":
      return "status-mild";
    case "heart failure":
      return "status-failure";
    default:
      return "";
  }
};

const getStatusLabel = (status: string) => {
  switch (status) {
    case "normal":
      return "Normal Function";
    case "mildly dysfunction":
      return "Mild Dysfunction";
    case "heart failure":
      return "Heart Failure";
    default:
      return status;
  }
};

export const ResultsDisplay = ({ results }: ResultsDisplayProps) => {
  return (
    <div className="space-y-6 animate-fade-in">
      {/* Heart Function Status */}
      <Card className="glass-card p-6">
        <div className="flex items-center gap-4">
          <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
            <Heart className="h-7 w-7 text-primary" />
          </div>
          <div className="flex-1">
            <p className="text-sm text-muted-foreground">Heart Function Assessment</p>
            <h3 className="font-display text-2xl font-bold">Cardiac Status</h3>
          </div>
          <div
            className={cn(
              "rounded-full border px-6 py-2 text-sm font-semibold",
              getStatusClass(results.heartFunction)
            )}
          >
            {getStatusLabel(results.heartFunction)}
          </div>
        </div>
      </Card>

      {/* Ejection Fraction */}
      <Card className="glass-card p-6 ring-2 ring-primary/20">
        <div className="flex items-center gap-4">
          <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10">
            <TrendingUp className="h-7 w-7 text-primary" />
          </div>
          <div className="flex-1">
            <p className="text-sm text-muted-foreground">Ejection Fraction</p>
            <p className="font-display text-3xl font-bold">
              {results.ejectionFraction.toFixed(1)}
              <span className="ml-1 text-lg font-normal text-muted-foreground">%</span>
            </p>
          </div>
        </div>
      </Card>
    </div>
  );
};