import type { FeaturesProps } from 'mdxui'

interface FeaturesProps {
  /** Section title */
  title?: string
  /** Section description */
  description?: string
  /** Feature items */
  features: FeatureItem[]
  /** Layout variant */
  variant?: 'grid' | 'list' | 'bento'
  /** Number of columns (for grid) */
  columns?: number
}

interface FeatureItem {
  /** Feature title */
  title: string
  /** Feature description */
  description: string
  /** Icon name or element */
  icon?: ReactNode
  /** Link URL */
  href?: string
}

import { Features } from '@mdxui/beacon'

<Features
  features={[
    {
      title: "Type-safe",
      description: "Full TypeScript support with Zod schemas",
      icon: "Shield"
    },
    {
      title: "Auto-wiring",
      description: "Components connect to Payload CMS automatically",
      icon: "Zap"
    },
    {
      title: "Responsive",
      description: "Mobile-first design that works everywhere",
      icon: "Smartphone"
    }
  ]}
/>

<Features
  title="Everything you need to ship fast"
  description="Pre-built components for every part of your SaaS application"
  features={[
    {
      title: "Authentication",
      description: "Magic links, OAuth, and session management built-in",
      icon: "Lock"
    },
    {
      title: "Billing",
      description: "Stripe integration with subscription management",
      icon: "CreditCard"
    },
    {
      title: "Admin Dashboard",
      description: "Full-featured admin panel powered by Payload CMS",
      icon: "LayoutDashboard"
    }
  ]}
/>

<Features
  variant="grid"
  columns={3}
  features={[
    { title: "Fast", description: "Built on React and Tailwind", icon: "Zap" },
    { title: "Flexible", description: "Customize everything", icon: "Sliders" },
    { title: "Accessible", description: "WCAG AA compliant", icon: "Eye" },
    { title: "Documented", description: "Comprehensive docs", icon: "Book" },
    { title: "Open Source", description: "MIT licensed", icon: "Github" },
    { title: "Support", description: "Community Discord", icon: "MessageCircle" }
  ]}
/>

<Features
  variant="list"
  features={[
    {
      title: "Real-time collaboration",
      description: "Work together with your team in real-time. See changes as they happen with live cursors and presence indicators.",
      icon: "Users",
      href: "/features/collaboration"
    },
    {
      title: "Version control",
      description: "Track every change with automatic versioning. Roll back to any point in time with a single click.",
      icon: "GitBranch",
      href: "/features/versioning"
    }
  ]}
/>

<Features
  variant="bento"
  features={[
    {
      title: "AI-powered insights",
      description: "Get intelligent recommendations based on your data",
      icon: "Brain"
    },
    {
      title: "Advanced analytics",
      description: "Track metrics that matter",
      icon: "BarChart"
    },
    {
      title: "Custom reports",
      description: "Build reports your way",
      icon: "FileText"
    }
  ]}
/>

<Features
  title="Why developers choose mdxui"
  features={[...]}
/>

<Features
  title="Built for modern development"
  description="Everything you need to build production-ready applications"
  features={[...]}
/>

interface FeatureItem {
  title: string           // Feature name
  description: string     // Feature explanation
  icon?: ReactNode       // Icon component or name
  href?: string          // Optional link
}

<Features
  features={[
    {
      title: "Fast Performance",
      description: "Optimized for speed and efficiency",
      icon: "Zap",
      href: "/performance"
    }
  ]}
/>

// Grid: Equal-sized cards in a grid
<Features variant="grid" />

// List: Horizontal cards with more detail
<Features variant="list" />

// Bento: Asymmetric grid (like bento box)
<Features variant="bento" />

// 2 columns
<Features variant="grid" columns={2} />

// 4 columns
<Features variant="grid" columns={4} />

<Features
  variant="grid"
  columns={3}
  title="Platform features"
  features={[
    {
      title: "Secure by default",
      description: "Enterprise-grade security out of the box",
      icon: "Shield"
    },
    {
      title: "Scalable infrastructure",
      description: "Grows with your business needs",
      icon: "TrendingUp"
    },
    {
      title: "99.9% uptime",
      description: "Reliable and always available",
      icon: "Activity"
    }
  ]}
/>

<Features
  variant="list"
  features={[
    {
      title: "Advanced search",
      description: "Find anything instantly with full-text search, filters, and facets. Search across all your data with lightning-fast results.",
      icon: "Search",
      href: "/features/search"
    },
    {
      title: "Custom workflows",
      description: "Build workflows that match your process. Automate repetitive tasks and focus on what matters most.",
      icon: "Workflow",
      href: "/features/workflows"
    }
  ]}
/>

<Features
  variant="bento"
  features={[
    {
      title: "Visual editor",
      description: "Design without code",
      icon: "Paintbrush"
    },
    {
      title: "API access",
      description: "REST and GraphQL APIs",
      icon: "Code"
    },
    {
      title: "Webhooks",
      description: "Real-time notifications",
      icon: "Webhook"
    },
    {
      title: "Integrations",
      description: "Connect your tools",
      icon: "Plug"
    }
  ]}
/>

<section className="features">
  {(title || description) && (
    <div className="features-header">
      {title && <h2>{title}</h2>}
      {description && <p>{description}</p>}
    </div>
  )}

  <div className={`features-${variant}`}>
    {features.map(feature => (
      <FeatureCard
        key={feature.title}
        href={feature.href}
        className="feature-card"
      >
        {feature.icon && (
          <div className="feature-icon">
            <Icon name={feature.icon} />
          </div>
        )}
        <h3 className="feature-title">{feature.title}</h3>
        <p className="feature-description">{feature.description}</p>
      </FeatureCard>
    ))}
  </div>
</section>

<Features
  title="Everything you need to run your business"
  description="Powerful features that scale with your team"
  variant="grid"
  columns={3}
  features={[
    {
      title: "Team Collaboration",
      description: "Work together seamlessly with real-time sync and comments",
      icon: "Users"
    },
    {
      title: "Advanced Permissions",
      description: "Control access with role-based permissions and teams",
      icon: "Lock"
    },
    {
      title: "API & Webhooks",
      description: "Integrate with your existing tools via REST API",
      icon: "Code"
    },
    {
      title: "Analytics Dashboard",
      description: "Track performance with detailed analytics and reports",
      icon: "BarChart"
    },
    {
      title: "Custom Branding",
      description: "White-label the platform with your brand colors and logo",
      icon: "Paintbrush"
    },
    {
      title: "24/7 Support",
      description: "Get help when you need it from our expert team",
      icon: "MessageCircle"
    }
  ]}
/>

<Features
  title="Built for developers"
  variant="list"
  features={[
    {
      title: "TypeScript First",
      description: "Full type safety across your entire stack. Catch bugs before they reach production with comprehensive TypeScript support and auto-generated types.",
      icon: "Code2",
      href: "/docs/typescript"
    },
    {
      title: "CLI Tools",
      description: "Scaffold projects, generate components, and deploy with a single command. Our CLI handles the boring stuff so you can focus on building.",
      icon: "Terminal",
      href: "/docs/cli"
    },
    {
      title: "Hot Module Reload",
      description: "See changes instantly without losing state. Our development server updates in milliseconds, not seconds.",
      icon: "Zap",
      href: "/docs/hmr"
    }
  ]}
/>

<Features
  variant="bento"
  features={[
    {
      title: "Inventory Management",
      description: "Track stock across multiple locations",
      icon: "Package"
    },
    {
      title: "Payment Processing",
      description: "Accept cards, wallets, and more",
      icon: "CreditCard"
    },
    {
      title: "Order Tracking",
      description: "Real-time shipping updates",
      icon: "Truck"
    },
    {
      title: "Customer Accounts",
      description: "Self-service portal for customers",
      icon: "User"
    },
    {
      title: "Discount Codes",
      description: "Create flexible promotions",
      icon: "Tag"
    },
    {
      title: "Analytics",
      description: "Track sales and customer behavior",
      icon: "TrendingUp"
    }
  ]}
/>

<Features
  features={[
    { title: "Fast", icon: "Zap" },
    { title: "Secure", icon: "Shield" },
    { title: "Scalable", icon: "TrendingUp" }
  ]}
/>

import { CustomIcon } from './icons'

<Features
  features={[
    {
      title: "Custom Feature",
      icon: <CustomIcon className="w-6 h-6" />
    }
  ]}
/>

<Features
  variant="list"
  features={[
    {
      title: "Text-focused feature",
      description: "Sometimes words are enough"
    }
  ]}
/>

<section className="features" aria-labelledby="features-title">
  <h2 id="features-title">{title}</h2>

  <div className="feature-grid">
    {features.map(feature => (
      feature.href ? (
        <a
          href={feature.href}
          className="feature-card"
          aria-label={`Learn more about ${feature.title}`}
        >
          {/* Feature content */}
        </a>
      ) : (
        <div className="feature-card">
          {/* Feature content */}
        </div>
      )
    ))}
  </div>
</section>

<LandingPage>
  <Hero {...heroProps} />
  <Features {...featuresProps} />
  <Pricing {...pricingProps} />
</LandingPage>

<LandingPage>
  <Hero {...heroProps} />

  <Features
    title="For Teams"
    variant="grid"
    features={teamFeatures}
  />

  <Features
    title="For Developers"
    variant="list"
    features={devFeatures}
  />
</LandingPage>

// Dynamic import for better code splitting
const Icon = lazy(() => import('./Icon'))

<Features
  features={[
    { title: "Feature", icon: <Icon name="Zap" /> }
  ]}
/>

<Features
  features={[
    {
      title: "Beautiful UI",
      description: "Components designed by professionals",
      image: "/feature-ui.png"  // Custom prop in your implementation
    }
  ]}
/>

import { z } from 'zod'
import type { Component } from 'mdxui'

export const FeatureItemSchema = z.object({
  title: z.string(),
  description: z.string(),
  icon: z.any().optional(),
  href: z.string().optional(),
})

export const FeaturesPropsSchema = z.object({
  title: z.string().optional(),
  description: z.string().optional(),
  features: z.array(FeatureItemSchema),
  variant: z.enum(['grid', 'list', 'bento']).default('grid'),
  columns: z.number().default(3),
})

export type FeatureItem = z.infer<typeof FeatureItemSchema>
export type FeaturesProps = z.infer<typeof FeaturesPropsSchema>
export type Features = Component<FeaturesProps>