// src/components/WhatsNewModal.tsx
import React from 'react';
import { XCircleIcon } from './icons/XCircleIcon';
import { GiftIcon } from './icons/GiftIcon';

interface WhatsNewModalProps {
  isOpen: boolean;
  onClose: () => void;
  version: string;
  commitMessage: string;
}

export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({ isOpen, onClose, version, commitMessage }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-60 z-50 flex justify-center items-center p-4" onClick={onClose}>
      <div
        className="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md m-4 transform transition-all"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-6">
          <div className="flex items-center mb-4">
            <div className="p-2 bg-brand-primary-light dark:bg-brand-primary-dark rounded-full mr-4">
              <GiftIcon className="w-6 h-6 text-brand-primary" />
            </div>
            <div>
              <h2 className="text-xl font-bold text-gray-900 dark:text-white">What's New?</h2>
              <p className="text-xs text-gray-500 dark:text-gray-400">Version: {version}</p>
            </div>
          </div>

          <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <p className="text-base font-medium text-gray-800 dark:text-gray-200">{commitMessage}</p>
          </div>

          <div className="mt-6 flex justify-end">
            <button
              onClick={onClose}
              className="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
            >
              Got it!
            </button>
          </div>
        </div>
        <button onClick={onClose} className="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
          <XCircleIcon className="w-6 h-6" />
        </button>
      </div>
    </div>
  );
};