import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';

const SuggestionPanel = ({ suggestion, onApplySuggestion, t }: any) => {
  if (!suggestion) return null;

  return (
    <Card className="bg-sky-50/50 border-l-4 border-sky-500">
      <CardHeader>
        <CardTitle className="text-lg">{t.whatIf}</CardTitle>
      </CardHeader>
      <CardContent>
        {suggestion.dose ? (
          <div className="space-y-3">
            <p className="text-sm text-sky-800">
              {t.suggestion}: <span className="font-bold">{suggestion.dose}{t.mg}</span> ({t.instead} {suggestion.originalDose}{t.mg}) {t.at} <span className="font-bold">{suggestion.time}</span>.
            </p>
            <Button
              onClick={onApplySuggestion}
              className="w-full bg-sky-600 hover:bg-sky-700"
            >
              {t.applySuggestion}
            </Button>
          </div>
        ) : (
          <p className="text-sm text-sky-800">{suggestion.text}</p>
        )}
      </CardContent>
    </Card>
  );
};

export default SuggestionPanel;