import { useState } from 'react';
import { TEMPLATES, TEMPLATE_CATEGORIES } from '../../constants/templates';

export function TemplatesTab({ onApplyTemplate }) {
  const [selectedCategory, setSelectedCategory] = useState('All');

  const filteredTemplates =
    selectedCategory === 'All'
      ? TEMPLATES
      : TEMPLATES.filter((t) => t.category === selectedCategory);

  return (
    <div className="templates-tab">
      <h3>Templates</h3>
      <div className="category-pills">
        {TEMPLATE_CATEGORIES.map((cat) => (
          <button
            key={cat}
            className={`category-pill ${selectedCategory === cat ? 'active' : ''}`}
            onClick={() => setSelectedCategory(cat)}
          >
            {cat}
          </button>
        ))}
      </div>
      <div className="templates-grid">
        {filteredTemplates.map((template) => (
          <button
            key={template.id}
            className="template-card"
            onClick={() => onApplyTemplate(template)}
          >
            <div className="template-preview">
              {template.elements.slice(0, 3).map((el, i) => (
                <span
                  key={i}
                  className="template-preview-element"
                  style={{
                    fontSize: el.type === 'text' && el.text.length === 1 ? '16px' : '8px',
                    color: el.fill,
                  }}
                >
                  {el.text}
                </span>
              ))}
            </div>
            <div className="template-info">
              <span className="template-name">{template.name}</span>
              <span className="template-category">{template.category}</span>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}