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

const FeedbackButton: React.FC = () => {
  const [showPanel, setShowPanel] = useState(false);

  return (
    <>
      <button
        className="feedback-tab"
        onClick={() => setShowPanel(true)}
        title="Send Feedback"
        aria-label="Send Feedback"
      >
        <div className="feedback-tab-text">FEEDBACK</div>
      </button>

      <FeedbackModal show={showPanel} onClose={() => setShowPanel(false)} />

      <style>{`
        .feedback-tab {
          position: fixed;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1000;
          background-color: #0d6efd;
          color: white;
          border: none;
          border-radius: 8px 0 0 8px;
          padding: 16px 10px;
          box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          flex-direction: column;
          align-items: center;
          writing-mode: vertical-rl;
          text-orientation: mixed;
        }

        .feedback-tab:hover {
          background-color: #0b5ed7;
          padding-right: 14px;
          box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
        }

        .feedback-tab:active {
          background-color: #0a58ca;
        }

        .feedback-tab-text {
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 2px;
          margin: 0;
          transform: rotate(180deg);
        }

        @media (max-width: 768px) {
          .feedback-tab {
            padding: 12px 8px;
          }

          .feedback-tab-text {
            font-size: 12px;
            letter-spacing: 1px;
          }
        }
      `}</style>
    </>
  );
};

export default FeedbackButton;