import React from 'react';
import { Eye, Star } from 'lucide-react';
import { Business } from '../../types';

const MousePointerClick = ({className}: {className?:string}) => (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
        <path d="M14 4.1 12 6" /><path d="m5.1 8-2.9-.8" /><path d="m6 12-1.9 2" /><path d="M7.2 2.2 8 5.1" /><path d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z" />
    </svg>
);

const DashboardOverview = ({ business }: { business: Business }) => (
    <div className="space-y-6">
        <h2 className="text-2xl font-bold font-serif text-gray-900">Tableau de bord</h2>
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-3">
            <div className="bg-white overflow-hidden shadow rounded-lg">
                <div className="p-5">
                    <div className="flex items-center">
                        <div className="flex-shrink-0 bg-brand-100 rounded-md p-3">
                            <Eye className="h-6 w-6 text-brand-600" />
                        </div>
                        <div className="ml-5 w-0 flex-1">
                            <dl>
                                <dt className="text-sm font-medium text-gray-500 truncate">Vues de la fiche</dt>
                                <dd>
                                    <div className="text-lg font-medium text-gray-900">{business.viewCount}</div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <div className="bg-white overflow-hidden shadow rounded-lg">
                <div className="p-5">
                    <div className="flex items-center">
                        <div className="flex-shrink-0 bg-blue-100 rounded-md p-3">
                            <MousePointerClick className="h-6 w-6 text-blue-600" />
                        </div>
                        <div className="ml-5 w-0 flex-1">
                            <dl>
                                <dt className="text-sm font-medium text-gray-500 truncate">Clics Contact</dt>
                                <dd>
                                    <div className="text-lg font-medium text-gray-900">42</div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
             <div className="bg-white overflow-hidden shadow rounded-lg">
                <div className="p-5">
                    <div className="flex items-center">
                        <div className="flex-shrink-0 bg-yellow-100 rounded-md p-3">
                            <Star className="h-6 w-6 text-yellow-600" />
                        </div>
                        <div className="ml-5 w-0 flex-1">
                            <dl>
                                <dt className="text-sm font-medium text-gray-500 truncate">Note moyenne</dt>
                                <dd>
                                    <div className="text-lg font-medium text-gray-900">{business.rating}/5</div>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div className="bg-white shadow rounded-lg p-6">
             <h3 className="text-lg leading-6 font-medium text-gray-900 mb-4">Performances 30 derniers jours</h3>
             <div className="h-64 bg-gray-50 rounded border border-dashed border-gray-200 flex items-center justify-center text-gray-400">
                Graphique des visites (À venir en Phase 2)
             </div>
        </div>
    </div>
);

export default DashboardOverview;