import React from 'react';
import { Card, Button } from '../../../components/ui';
import { __ } from '@wordpress/i18n';

const CHANGELOG_URL = 'https://wordpress.org/plugins/prorank-seo/#developers';
const DOCS_URL = 'https://docs.prorank.io/';

const ChangelogTab = () => {
  const currentVersion = window.prorankSupport?.version || '1.0.3';

  return (
    <div className="prorank-changelog-tab">
      <Card className="pr:mb-6">
        <div className="pr:p-6">
          <h3 className="pr:text-lg pr:font-semibold pr:mb-2">
            {__('Current Version', 'prorank-seo')}
          </h3>
          <div className="pr:flex pr:items-center pr:gap-3">
            <span className="pr:text-3xl pr:font-bold pr:text-blue-600">{currentVersion}</span>
          </div>
        </div>
      </Card>

      <Card>
        <div className="pr:p-6 pr:text-center">
          <h3 className="pr:text-xl pr:font-semibold pr:mb-4">
            {__('View Full Changelog', 'prorank-seo')}
          </h3>
          <p className="pr:text-gray-600 pr:mb-6">
            {__('See release notes, fixes, and free-plugin updates on WordPress.org.', 'prorank-seo')}
          </p>
          <div className="pr:flex pr:justify-center pr:gap-4">
            <Button
              variant="primary"
              href={CHANGELOG_URL}
              target="_blank"
            >
              {__('View on WordPress.org', 'prorank-seo')}
            </Button>
            <Button
              variant="secondary"
              href={DOCS_URL}
              target="_blank"
            >
              {__('Browse Documentation', 'prorank-seo')}
            </Button>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default ChangelogTab;
