import { Briefcase, PlusCircle, FolderTree, Settings } from 'lucide-react'
import { SectionCard } from '../components/SectionCard'
import { Breadcrumbs } from '../components/Breadcrumbs'
import styles from '../components/PageContent.module.css'

const portfolioSections = [
  {
    icon: Briefcase,
    title: 'My Portfolios',
    description: 'View, edit and manage all your portfolio items.',
    linkText: 'View portfolios',
    href: '/portfolios/list',
  },
  {
    icon: PlusCircle,
    title: 'Add New Portfolio',
    description: 'Create and publish a new portfolio project.',
    linkText: 'Add portfolio',
    href: '/portfolios/new',
  },
  {
    icon: FolderTree,
    title: 'Portfolio Categories',
    description: 'Organize portfolio items into categories and subcategories.',
    linkText: 'View categories',
    href: '/portfolios/categories',
  },
  {
    icon: Settings,
    title: 'Settings',
    description: 'Configure portfolio comment moderation and display options.',
    linkText: 'View settings',
    href: '/portfolios/settings',
  },
]

export function PortfoliosPage() {
  return (
    <main className={styles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Portfolios' },
        ]}
      />
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.pageTitle}>Portfolios</h2>
          <p className={styles.pageSubtitle}>
            Manage your portfolio items and showcase projects.
          </p>
        </div>
      </div>

      <div className={styles.gridHome}>
        {portfolioSections.map((section) => (
          <SectionCard key={section.title} {...section} />
        ))}
      </div>
    </main>
  )
}
