/**
 * Email Settings Page
 *
 * Manage email addresses for ticket system and customer communication.
 */

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useOutletContext } from 'react-router-dom';
import { Mail } from 'lucide-react';
import { Business, User } from '../../types';
import TicketEmailAddressManager from '../../components/TicketEmailAddressManager';

const EmailSettings: React.FC = () => {
  const { t } = useTranslation();
  const { business, user } = useOutletContext<{
    business: Business;
    user: User;
  }>();

  const isOwner = user.role === 'owner';

  if (!isOwner) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500 dark:text-gray-400">
          Only the business owner can access these settings.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
          <Mail className="text-blue-500" />
          {t('settings.email.title', 'Email Setup')}
        </h2>
        <p className="text-gray-500 dark:text-gray-400 mt-1">
          Configure email addresses for your ticketing system and customer communication.
        </p>
      </div>

      {/* Email Address Manager */}
      <TicketEmailAddressManager />
    </div>
  );
};

export default EmailSettings;
