story-generator/src/components/ThemeSelector.tsx

import React from 'react';
import { Theme } from '../types';
import {
  Leaf,
  Users,
  PartyPopper,
  History,
  Droplets,
  Dog,
  Recycle,
} from 'lucide-react';

const THEMES: Theme[] = [
  {
    id: 'nature',
    title: 'Natureza e Meio Ambiente',
    description: 'Explore as maravilhas do nosso planeta',
    icon: 'Leaf',
    sdsGoal: 13,
    category: 'environment',
  },
  {
    id: 'indigenous',
    title: 'Povos Originários do Brasil',
    description: 'Conheça as culturas indígenas',
    icon: 'Users',
    sdsGoal: 10,
    category: 'culture',
  },
  {
    id: 'traditions',
    title: 'Festas e Tradições Brasileiras',
    description: 'Celebre nossa cultura',
    icon: 'PartyPopper',
    sdsGoal: 11,
    category: 'culture',
  },
  {
    id: 'quilombola',
    title: 'Histórias Quilombolas',
    description: 'Descubra nossa história',
    icon: 'History',
    sdsGoal: 10,
    category: 'culture',
  },
  {
    id: 'water',
    title: 'Água é Vida',
    description: 'Aprenda sobre esse recurso precioso',
    icon: 'Droplets',
    sdsGoal: 6,
    category: 'environment',
  },
  {
    id: 'animals',
    title: 'Animais Brasileiros',
    description: 'Conheça nossa fauna',
    icon: 'Dog',
    sdsGoal: 15,
    category: 'nature',
  },
  {
    id: 'sustainable',
    title: 'Vivendo Sustentável',
    description: 'Cuide do nosso futuro',
    icon: 'Recycle',
    sdsGoal: 12,
    category: 'environment',
  },
];

const IconMap = {
  Leaf,
  Users,
  PartyPopper,
  History,
  Droplets,
  Dog,
  Recycle,
};

interface Props {
  onSelect: (theme: Theme) => void;
}

export function ThemeSelector({ onSelect }: Props) {
  const [selectedCategory, setSelectedCategory] = React.useState('all');

  const filteredThemes =
    selectedCategory === 'all'
      ? THEMES
      : THEMES.filter((theme) => theme.category === selectedCategory);

  return (
    <div className="min-h-screen bg-gradient-to-b from-yellow-100 to-orange-100 p-6">
      <div className="max-w-6xl mx-auto">
        <h1 className="text-4xl font-bold text-center text-orange-600 mb-8">
          Escolha sua Aventura!
        </h1>

        <div className="flex justify-center gap-4 mb-8">
          {[
            { id: 'all', label: 'Todos' },
            { id: 'environment', label: 'Meio Ambiente' },
            { id: 'culture', label: 'Cultura' },
            { id: 'nature', label: 'Natureza' },
          ].map((category) => (
            <button
              key={category.id}
              onClick={() => setSelectedCategory(category.id)}
              className={`px-6 py-3 rounded-full text-lg font-medium transition ${
                selectedCategory === category.id
                  ? 'bg-orange-600 text-white'
                  : 'bg-orange-100 text-orange-600 hover:bg-orange-200'
              }`}
            >
              {category.label}
            </button>
          ))}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredThemes.map((theme) => {
            const Icon = IconMap[theme.icon as keyof typeof IconMap];
            return (
              <button
                key={theme.id}
                onClick={() => onSelect(theme)}
                className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition group"
              >
                <div className="flex items-center gap-4 mb-4">
                  <div className="p-3 rounded-full bg-orange-100 group-hover:bg-orange-200 transition">
                    <Icon className="w-8 h-8 text-orange-600" />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-gray-800">
                      {theme.title}
                    </h3>
                    <p className="text-sm text-gray-600">{theme.description}</p>
                  </div>
                </div>
                <div className="text-sm text-orange-600 font-medium">
                  ODS {theme.sdsGoal}
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}