import {
  Package,
  ShoppingCart,
  Truck,
  CreditCard,
  Settings,
} from 'lucide-react'
import { SectionCard } from '../components/SectionCard'
import { Breadcrumbs } from '../components/Breadcrumbs'
import styles from '../components/PageContent.module.css'

const storeSections = [
  {
    icon: Package,
    title: 'My Store Items',
    description: 'View and manage all items listed in your store.',
    linkText: 'View items',
    href: '/store/items',
  },
  {
    icon: ShoppingCart,
    title: 'My Orders',
    description: 'Track and manage customer orders and fulfillment.',
    linkText: 'View orders',
    href: '/store/orders',
  },
  {
    icon: Truck,
    title: 'Shipping Fees',
    description: 'Configure shipping rates, zones and delivery options.',
    linkText: 'Manage shipping',
    href: '/store/shipping',
  },
  {
    icon: CreditCard,
    title: 'Shopping Cards',
    description: 'Manage saved shopping cards and payment methods.',
    linkText: 'View cards',
    href: '/store/cards',
  },
  {
    icon: Settings,
    title: 'Settings',
    description: 'Configure store preferences, pages and themes.',
    linkText: 'View settings',
    href: '/store/settings',
  },
]

export function StorePage() {
  return (
    <main className={styles.content}>
      <Breadcrumbs
        items={[
          { label: 'Dashboard', href: '/' },
          { label: 'Store' },
        ]}
      />
      <div className={styles.pageHeader}>
        <div>
          <h2 className={styles.pageTitle}>Store</h2>
          <p className={styles.pageSubtitle}>
            Manage your store items, orders and settings.
          </p>
        </div>
      </div>

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