import React from 'react';
import { useTranslation } from 'react-i18next';
import type { SetupStepProps } from '../SetupWizard';

export const TeamSetupStep: React.FC<SetupStepProps> = () => {
  const { t } = useTranslation();

  return (
    <div className="space-y-6">
      <div className="bg-[var(--color-info)]/10 border border-[var(--color-info)]/20 rounded-lg p-4">
        <h3 className="font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
          <svg className="w-5 h-5 text-[var(--color-info)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          {t('setup_wizard:why_this_matters', 'Why This Matters')}
        </h3>
        <p className="text-sm text-[var(--text-secondary)]">
          {t('setup_wizard:team.why', 'Adding team members allows you to assign tasks, track who does what, and give everyone the tools they need to work efficiently.')}
        </p>
      </div>

      <div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
        <div className="w-16 h-16 bg-[var(--bg-secondary)] rounded-full mx-auto mb-4 flex items-center justify-center">
          👥
        </div>
        <h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
          {t('setup_wizard:team.placeholder_title', 'Team Management')}
        </h3>
        <p className="text-[var(--text-secondary)] mb-4">
          {t('setup_wizard:team.placeholder_desc', 'This feature will be implemented in Phase 3')}
        </p>
        <p className="text-sm text-[var(--text-tertiary)]">
          {t('setup_wizard:team.optional', 'This step is optional')}
        </p>
      </div>
    </div>
  );
};