import React from 'react'
import { FaTachometerAlt, FaDatabase, FaBolt, FaServer, FaPuzzlePiece } from 'react-icons/fa'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { useLocation, useNavigate } from 'react-router-dom'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { Container } from '../shared'

interface DeveloperLayoutProps {
  children: React.ReactNode
}

const DeveloperLayout: React.FC<DeveloperLayoutProps> = ({ children }) => {
  const { translate } = useLocalization()
  const location = useLocation()
  const navigate = useNavigate()

  const navigation = [
    {
      id: 'entities',
      label: translate('::App.DeveloperKit.Entity'),
      icon: FaDatabase,
      path: ROUTES_ENUM.protected.saas.developerKit.entities,
    },
    {
      id: 'endpoints',
      label: translate('::App.DeveloperKit.CrudEndpoints'),
      icon: FaServer,
      path: ROUTES_ENUM.protected.saas.developerKit.endpoints,
    },
    {
      id: 'components',
      label: translate('::App.DeveloperKit.Components'),
      icon: FaPuzzlePiece,
      path: ROUTES_ENUM.protected.saas.developerKit.components,
    },
  ]

  return (
    <Container>
      <div className="flex flex-col lg:flex-row gap-8">
        {/* Main Content */}
        <div className="flex-1">{children}</div>
      </div>
    </Container>
  )
}

export default DeveloperLayout