import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Callout } from "@/components/ui/callout";
import { Markdown } from "@/components/ui/markdown";
import type { CommonMistake } from "@/types";

interface CommonMistakesListProps {
  mistakes: CommonMistake[];
}

export function CommonMistakesList({ mistakes }: CommonMistakesListProps) {
  if (!mistakes.length) return null;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Common Mistakes</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {mistakes.map((mistake) => (
            <Callout key={mistake.title} variant="warning" title={mistake.title}>
              <div className="space-y-2">
                <Markdown>{mistake.description}</Markdown>
                {mistake.fix && (
                  <div className="mt-3 pt-3 border-t border-[var(--callout-warning-border)]">
                    <p className="text-sm font-medium mb-1">Fix:</p>
                    <Markdown>{mistake.fix}</Markdown>
                  </div>
                )}
              </div>
            </Callout>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
