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

export function RepoOverview() {
    const { repo_name } = useParams<{ repo_name: string }>();

    return (
        <div className="p-6">
            <div className="mb-6">
                <h2 className="text-lg font-semibold">{repo_name}</h2>
                <p className="text-sm text-muted-foreground">Repository overview</p>
            </div>
            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                        <Globe className="h-5 w-5" />
                        Overview
                    </CardTitle>
                    <CardDescription>
                        Repository details and statistics will appear here.
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
                        <Globe className="h-10 w-10 mx-auto mb-3 opacity-50" />
                        <p className="font-medium">Coming soon</p>
                        <p className="text-sm mt-1">
                            Repository overview and statistics.
                        </p>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
}
