import React from 'react'

export default function CommunityPage() {
    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold text-gray-900 dark:text-white font-heading">
                    Community
                </h1>
                <p className="mt-2 text-gray-600 dark:text-gray-400">
                    Connect with others, join support groups, and share your journey.
                </p>
            </div>

            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {/* Placeholder for community features */}
                <div className="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
                    <div className="p-5">
                        <div className="flex items-center">
                            <div className="flex-shrink-0">
                                {/* Icon */}
                            </div>
                            <div className="ml-5 w-0 flex-1">
                                <dl>
                                    <dt className="text-sm font-medium text-gray-500 truncate">
                                        Support Groups
                                    </dt>
                                    <dd>
                                        <div className="text-lg font-medium text-gray-900 dark:text-white">
                                            Join a Group
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div className="bg-gray-50 dark:bg-gray-900 px-5 py-3">
                        <div className="text-sm">
                            <a href="/supportgroup" className="font-medium text-primary-600 hover:text-primary-500">
                                View all groups
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}