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

interface ReportPostModalProps {
  postId: string;
  onClose: () => void;
  onReport: (postId: string, reason: string) => void;
}

const REPORT_REASONS = [
  'Spam',
  'Copyright Infringement',
  'Inappropriate Content',
  'Hate Speech',
  'Harassment or Bullying',
  'Misinformation',
  'Other',
];

const ReportPostModal: React.FC<ReportPostModalProps> = ({ postId, onClose, onReport }) => {
  const [selectedReason, setSelectedReason] = useState<string>('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedReason) {
      alert('Please select a reason for reporting.');
      return;
    }
    onReport(postId, selectedReason);
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-background rounded-lg shadow-xl w-full max-w-md border border-accent">
        <div className="flex justify-between items-center p-4 border-b border-muted">
          <h2 className="text-xl font-bold">Report Post</h2>
          <button onClick={onClose} className="text-secondary hover:text-foreground">
            <XIcon className="w-6 h-6" />
          </button>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="p-6">
            <p className="text-muted-foreground mb-4">Please select the reason for reporting this post. Your report is anonymous.</p>
            <fieldset className="space-y-3">
              {REPORT_REASONS.map(reason => (
                <div key={reason} className="flex items-center">
                  <input
                    id={reason}
                    name="report-reason"
                    type="radio"
                    value={reason}
                    checked={selectedReason === reason}
                    onChange={(e) => setSelectedReason(e.target.value)}
                    className="h-4 w-4 text-primary border-gray-300 focus:ring-primary"
                  />
                  <label htmlFor={reason} className="ml-3 block text-sm font-medium text-foreground">
                    {reason}
                  </label>
                </div>
              ))}
            </fieldset>
          </div>
          <div className="p-4 bg-muted border-t border-accent flex justify-end">
            <button
              type="submit"
              disabled={!selectedReason}
              className="bg-destructive text-primary-foreground font-bold py-2 px-6 rounded-full hover:opacity-90 transition-colors disabled:bg-secondary disabled:cursor-not-allowed"
            >
              Submit Report
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ReportPostModal;