import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { History } from "lucide-react";
import { VersionHistory } from "../VersionControl";

interface VersionHistoryCardProps {
  versionHistory: VersionHistory[];
  title?: string;
  maxVisible?: number;
}

export function VersionHistoryCard({ 
  versionHistory, 
  title = "수정 이력",
  maxVisible = 3 
}: VersionHistoryCardProps) {
  if (versionHistory.length === 0) {
    return null;
  }

  return (
    <Card className="border-purple-200 bg-purple-50">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-purple-700">
          <History className="h-5 w-5" />
          {title}
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="bg-white border border-purple-200 rounded-lg p-4">
          <div className="text-sm space-y-2">
            <div className="flex items-center justify-between mb-2">
              <span className="font-semibold text-purple-700">최근 수정 이력</span>
              <Badge variant="secondary">총 {versionHistory.length}건</Badge>
            </div>
            <div className="max-h-32 overflow-y-auto space-y-2">
              {versionHistory.slice().reverse().slice(0, maxVisible).map((history) => (
                <div key={history.id} className="flex items-center gap-2 text-xs">
                  <Badge variant="outline">v{history.version}</Badge>
                  <span className="text-muted-foreground">•</span>
                  <span>{history.changeDescription}</span>
                  <span className="text-muted-foreground">•</span>
                  <span className="text-muted-foreground">{history.changedBy}</span>
                  <span className="text-muted-foreground ml-auto">
                    {new Date(history.changedAt).toLocaleDateString('ko-KR')}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}
