1"use client";
2
3import React from "react";
4import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis } from "recharts";
5
6interface ChartDataPoint {
7  time: string;
8  visitors: number;
9}
10
11interface CountryData {
12  flag: string;
13  name: string;
14  count: number;
15}
16
17const chartData: ChartDataPoint[] = [
18  { time: "17:04", visitors: 2 },
19  { time: "17:05", visitors: 2 },
20  { time: "17:06", visitors: 2 },
21  { time: "17:07", visitors: 3 },
22  { time: "17:08", visitors: 0 },
23  { time: "17:09", visitors: 1 },
24  { time: "17:10", visitors: 2 },
25  { time: "17:11", visitors: 1 },
26  { time: "17:12", visitors: 3 },
27  { time: "17:13", visitors: 3 },
28  { time: "17:14", visitors: 2 },
29  { time: "17:15", visitors: 1 },
30  { time: "17:16", visitors: 0 },
31  { time: "17:17", visitors: 2 },
32  { time: "17:18", visitors: 1 },
33  { time: "17:19", visitors: 0 },
34  { time: "17:20", visitors: 1 },
35  { time: "17:21", visitors: 0 },
36  { time: "17:22", visitors: 4 },
37  { time: "17:23", visitors: 3 },
38  { time: "17:24", visitors: 3 },
39  { time: "17:25", visitors: 2 },
40  { time: "17:26", visitors: 2 },
41  { time: "17:27", visitors: 2 },
42  { time: "17:28", visitors: 5 },
43  { time: "17:29", visitors: 1 },
44  { time: "17:30", visitors: 4 },
45  { time: "17:31", visitors: 1 },
46  { time: "17:32", visitors: 5 },
47  { time: "17:33", visitors: 1 },
48];
49
50const countries: CountryData[] = [
51  { flag: "🇬🇧", name: "United Kingdom", count: 6 },
52  { flag: "🇫🇷", name: "France", count: 6 },
53  { flag: "🇩🇪", name: "Germany", count: 5 },
54];
55
56interface TooltipProps {
57  active?: boolean;
58  payload?: Array<{
59    value: number;
60  }>;
61}
62
63const CustomTooltip = ({ active, payload }: TooltipProps) => {
64  if (active && payload && payload.length) {
65    return (
66      <div className="bg-gray-800 rounded-md px-3 py-2 shadow-xl border border-gray-700">
67        <div className="flex items-center gap-2">
68          <div className="w-2 h-2 rounded-sm bg-blue-500"></div>
69          <span className="text-xs text-gray-300">Visitors</span>
70          <span className="text-sm font-semibold text-white ml-2">
71            {payload[0].value}
72          </span>
73        </div>
74      </div>
75    );
76  }
77  return null;
78};
79
80export default function AnalyticsChartWidget() {
81  const totalUsers = chartData.reduce((sum, d) => sum + d.visitors, 0);
82
83  return (
84    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-4">
85      <div className="w-full max-w-xs bg-white rounded-xl border border-gray-200 p-6 animate-in fade-in duration-500">
86        <div className="flex flex-col gap-4">
87          {/* Header Section */}
88          <div className="space-y-2">
89            <div
90              className="font-medium uppercase tracking-wider opacity-50"
91              style={{ fontSize: "12px" }}
92            >
93              Users in Last 30 Minutes
94            </div>
95            <div className="flex items-center gap-3">
96              <div className="font-extrabold" style={{ fontSize: "25.2px" }}>
97                {totalUsers}
98              </div>
99              <span className="relative inline-flex h-2 w-2">
100                <span
101                  className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500"
102                  style={{
103                    opacity: 0.75,
104                  }}
105                ></span>
106                <span
107                  className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"
108                ></span>
109              </span>
110            </div>
111          </div>
112
113          {/* Chart Section */}
114          <div className="h-[130px] w-full">
115            <ResponsiveContainer width="100%" height="100%">
116              <BarChart data={chartData}>
117                <XAxis
118                  dataKey="time"
119                  stroke="#666"
120                  strokeWidth={0.5}
121                  opacity={0.5}
122                  tick={{ fontSize: 8.24, opacity: 0.5, fill: "#666" }}
123                  tickLine={false}
124                  axisLine={{ opacity: 0.5 }}
125                  interval={6}
126                />
127                <Tooltip content={<CustomTooltip />} cursor={false} />
128                <Bar
129                  dataKey="visitors"
130                  fill="#3b82f6"
131                  radius={[2, 2, 0, 0]}
132                  maxBarSize={7}
133                />
134              </BarChart>
135            </ResponsiveContainer>
136          </div>
137
138          {/* Country Section */}
139          <div className="space-y-2">
140            <div
141              className="font-medium uppercase tracking-wider opacity-50"
142              style={{ fontSize: "12px" }}
143            >
144              Country
145            </div>
146            <div className="space-y-1" style={{ fontSize: "14px" }}>
147              {countries.map((country, index) => (
148                <div key={index} className="flex items-center gap-3">
149                  <span className="scale-110">{country.flag}</span>
150                  <span className="truncate">{country.name}</span>
151                  <span className="ml-auto">{country.count}</span>
152                </div>
153              ))}
154            </div>
155          </div>
156        </div>
157      </div>
158    </div>
159  );
160}
161