"use client"

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  CartesianGrid,
} from "recharts"

interface WeeklyData {
  date: string
  minutes: number
}

export function WeeklyActivityChart({ data }: { data: WeeklyData[] }) {
  if (!data || data.length === 0) {
    return (
      <div className="text-center text-muted-foreground italic py-8">
        No hay actividad esta semana
      </div>
    )
  }

  const daysOfWeek = ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"]
  const chartData = data.map((d) => {
    const day = new Date(d.date).getDay()
    return {
      name: daysOfWeek[day],
      minutos: d.minutes,
    }
  })

  return (
    <div className="w-full h-48">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={chartData} margin={{ top: 8, right: 8, bottom: 0, left: -16 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#E8E0D8" />
          <XAxis dataKey="name" tick={{ fontSize: 12, fill: "#6B7280" }} />
          <YAxis tick={{ fontSize: 12, fill: "#6B7280" }} />
          <Tooltip
            contentStyle={{ borderRadius: 12, border: "1px solid #E8E0D8" }}
            formatter={(value: number) => [`${value} min`, "Actividad"]}
          />
          <Bar dataKey="minutos" fill="#8CB8A0" radius={[6, 6, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}