interface CommitsByDateProps {
    commits: Array<{ date: string; count: number }>;
    className?: string;
  }
  
  export function CommitsByDateChart({ commits, className }: CommitsByDateProps) {
    const sortedCommits = [...commits].sort(
      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
    );
  
    const maxValue = Math.max(...sortedCommits.map(c => c.count), 1);
  
    return (
      <div className={className}>
        <h4 className="text-sm font-semibold mb-4">Commits par date</h4>
        <div className="flex items-end gap-2 h-40">
          {sortedCommits.map((commit, idx) => {
            const height = (commit.count / maxValue) * 100;
            const date = new Date(commit.date);
            const label = date.toLocaleDateString("fr-FR", { day: "2-digit", month: "short" });
            return (
              <div key={idx} className="flex-1 flex flex-col items-center gap-1">
                <span className="text-xs text-muted-foreground">
                  {commit.count > 0 ? commit.count : ''}
                </span>
                <div
                  className="w-full bg-emerald-500 rounded-t-sm"
                  style={{ 
                    height: `${height}%`,
                    minHeight: commit.count > 0 ? '24px' : '0'
                  }}
                  title={`${label}: ${commit.count} commits`}
                />
                <span className="text-xs text-muted-foreground">{label}</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }