import { FileText } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

export function ProjectArticles() {
    return (
        <div className="flex-1 overflow-auto p-6">
            <div className="mb-6">
                <h1 className="text-xl font-semibold">Articles</h1>
                <p className="text-sm text-muted-foreground mt-1">
                    Write and manage project documentation and articles.
                </p>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <FileText className="h-5 w-5" />
                        Project Articles
                    </CardTitle>
                    <CardDescription>
                        Articles are not yet available.
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
                        <FileText className="h-10 w-10 mx-auto mb-3 opacity-50" />
                        <p className="font-medium">Coming soon</p>
                        <p className="text-sm mt-1">
                            Write and publish articles for your project.
                        </p>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}