import React, { useState } from 'react';
import { ChangelogModal } from './ChangelogModal';

interface VersionBadgeProps {
  repoUrl?: string;
}

export const VersionBadge: React.FC<VersionBadgeProps> = ({ 
  repoUrl = 'https://github.com/emberclone/emberclone' 
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const version = import.meta.env.VITE_APP_VERSION || '0.0.1';

  return (
    <>
      <button 
        onClick={() => setIsOpen(true)}
        className="text-xs text-gray-400 hover:text-gray-300 transition-colors duration-200 focus:outline-none"
      >
        v{version}
      </button>
      
      <ChangelogModal 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)} 
        repoUrl={repoUrl} 
      />
    </>
  );
};