"use client"

import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts"
import { useTranslation } from "@/lib/i18n"

export function Overview() {
  const { t, locale } = useTranslation()

  const months = locale === "zh"
    ? ["1月", "2月", "3月", "4月", "5月", "6月"]
    : ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]

  const data = [
    { name: months[0], total: 42000, deals: 8 },
    { name: months[1], total: 38000, deals: 12 },
    { name: months[2], total: 45000, deals: 10 },
    { name: months[3], total: 52000, deals: 15 },
    { name: months[4], total: 48500, deals: 12 },
    { name: months[5], total: 55000, deals: 18 },
  ]

  return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={data}>
        <XAxis dataKey="name" stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
        <YAxis
          stroke="#888888"
          fontSize={12}
          tickLine={false}
          axisLine={false}
          tickFormatter={(value) => `$${value / 1000}k`}
        />
        <CartesianGrid vertical={false} strokeDasharray="3 3" />
        <Tooltip
          formatter={(value, name) => {
            if (name === "total") return [`$${value}`, t("chart.revenue")]
            return [value, t("chart.deals")]
          }}
        />
        <Bar dataKey="total" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} name={t("chart.revenue")} />
      </BarChart>
    </ResponsiveContainer>
  )
}