import React from 'react';
import { PageLayout } from '@voilajsx/uikit/page';
import { {{FeatureName}}Card } from '../components/{{FeatureName}}Card';

export const {{FeatureName}}Page: React.FC = () => {
  return (
    <PageLayout>
      <PageLayout.Content>
        <div className="space-y-8">
          <div className="text-center space-y-4">
            <h1 className="voila-heading text-4xl md:text-5xl text-gradient-primary">
              {{FeatureName}}
            </h1>
            <p className="voila-subheading text-muted-foreground max-w-2xl mx-auto text-xl">
              Main {{featureName}} page with full feature implementation
            </p>
          </div>

          <div className="max-w-4xl mx-auto">
            <{{FeatureName}}Card
              title="{{FeatureName}} Feature"
              description="Complete feature implementation with components and pages"
              onAction={() => console.log('{{FeatureName}} action triggered')}
            />
          </div>
        </div>
      </PageLayout.Content>
    </PageLayout>
  );
};