🎨 راهنمای ایجاد کامپوننت

'use client'

import React, { useState, useEffect } from 'react'
import { apiRequest } from '@/utils/functions'

const MyNewComponent = ({ 
  title = 'عنوان پیش‌فرض',
  subtitle = 'زیرعنوان پیش‌فرض',
  data = null,
  dataSourceType = 'manual',
  categoryIds = null
}) => {

  const [componentData, setComponentData] = useState([])

  useEffect(() => {
    if (dataSourceType === 'category' && categoryIds?.length > 0) {
      fetchCategoryData(categoryIds)
    }
  }, [dataSourceType, categoryIds])

  const fetchCategoryData = async (ids) => {
    try {
      const results = await Promise.all(
        ids.map(catId => 
          apiRequest(`/products?category=${catId}`, 'GET').catch(() => null)
        )
      )
      
      const allData = results
        .filter(result => result?.success && result?.data)
        .flatMap(result => {
          const data = result.data.data || result.data
          return Array.isArray(data) ? data : []
        })
      
      setComponentData(allData)
    } catch (error) {
      console.warn('خطا در دریافت داده:', error)
    }
  }

  return (
    <div className="w-full bg-white">
      <div className="max-w-7xl mx-auto px-6 py-12">
        <h2 className="text-3xl danaBold text-gray-900 mb-4">{title}</h2>
        <p className="text-gray-600 mb-8">{subtitle}</p>
      </div>
    </div>
  )
}

export default MyNewComponent