import { Sparkles, Tag, Layers } from 'lucide-react'
import './OnboardingPost.css'

export default function OnboardingPost({ type, onAction, onDismiss }) {
  const content = {
    welcome: {
      icon: Sparkles,
      title: '👋 Добро пожаловать в Nakama!',
      text: 'Здесь ты найдешь furry и anime контент от сообщества',
      action: 'Настроить интересы',
      color: '#007AFF'
    },
    tags: {
      icon: Tag,
      title: '🎯 Настрой свою ленту',
      text: 'Выбери теги, чтобы видеть только интересный контент',
      action: 'Выбрать теги',
      color: '#FF8A33'
    },
    media: {
      icon: Layers,
      title: '🎨 Открой для себя больше',
      text: 'Furry, Anime арт и Music — всё в одном месте',
      action: 'Посмотреть',
      color: '#9b59b6'
    }
  }

  const current = content[type] || content.welcome
  const Icon = current.icon

  return (
    <div className="onboarding-post">
      <div className="onboarding-icon" style={{ backgroundColor: `${current.color}15` }}>
        <Icon size={32} color={current.color} strokeWidth={2} />
      </div>
      
      <div className="onboarding-content">
        <h3>{current.title}</h3>
        <p>{current.text}</p>
        
        <div className="onboarding-actions">
          <button 
            className="onboarding-btn primary"
            onClick={onAction}
            style={{ backgroundColor: current.color }}
          >
            {current.action}
          </button>
          {onDismiss && (
            <button 
              className="onboarding-btn secondary"
              onClick={onDismiss}
            >
              Позже
            </button>
          )}
        </div>
      </div>
    </div>
  )
}