import React from 'react';
import { Badge } from './ui/badge';

interface VersionBadgeProps {
    className?: string;
}

export const VersionBadge: React.FC<VersionBadgeProps> = ({ className = '' }) => {
    const version = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev';
    const buildTime = typeof __BUILD_TIMESTAMP__ !== 'undefined' ? __BUILD_TIMESTAMP__ : '';

    // Format ISO string to a more readable short date/time
    const formattedTime = buildTime
        ? new Date(buildTime).toLocaleString(undefined, {
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        })
        : '';

    return (
        <div className={`flex flex-col items-end text-[10px] text-slate-500 ${className}`}>
            <Badge variant="outline" className="text-[10px] h-5 py-0 px-2 font-mono border-slate-800 text-slate-500">
                v{version}
            </Badge>
            {formattedTime && (
                <span className="mt-1 opacity-50 uppercase tracking-tighter">
                    Built: {formattedTime}
                </span>
            )}
        </div>
    );
};

export const useAppVersion = () => ({
    version: typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev',
    buildTimestamp: typeof __BUILD_TIMESTAMP__ !== 'undefined' ? __BUILD_TIMESTAMP__ : '',
});