[Sugestão] Desafio

import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { ResponsiveContainer, Tooltip, XAxis, YAxis, Legend, CartesianGrid, BarChart, Bar } from "recharts";

const dataTrimestrePagamento = [
  { trimestre: "2023Q1", PIX: 12000, Credito: 18000, Debito: 7000, Dinheiro: 5000 },
  { trimestre: "2023Q2", PIX: 15000, Credito: 21000, Debito: 8000, Dinheiro: 6000 },
  { trimestre: "2023Q3", PIX: 17000, Credito: 25000, Debito: 10000, Dinheiro: 7000 },
  { trimestre: "2023Q4", PIX: 20000, Credito: 23000, Debito: 11000, Dinheiro: 9000 },
];

const dataFaturamentoRegiao = [
  { regiao: "Norte", faturamento: 15000 },
  { regiao: "Nordeste", faturamento: 18000 },
  { regiao: "Centro-Oeste", faturamento: 12000 },
  { regiao: "Sudeste", faturamento: 32000 },
  { regiao: "Sul", faturamento: 21000 },
];

const dataComposicaoSexo = [
  { uf: "SP", Masculino: 3000, Feminino: 2500 },
  { uf: "RJ", Masculino: 2200, Feminino: 2800 },
];

const cores = {
  aqua1: "#addcd4",
  azul1: "#203f75",
  cinza5: "#231f20",
};

export default function DashboardStorytellingZoop() {
  return (
    <div className="p-6 bg-white min-h-screen">
      <h1 className="text-3xl font-bold text-[#231f20] mb-2">Storytelling – Faturamento e Público Zoop 2023</h1>
      <p className="text-[#203f75] mb-6">Painel interativo com visuais estratégicos: pagamentos, regiões e público</p>

      <Tabs defaultValue="trimestre">
        <TabsList className="bg-[#ebebeb]">
          <TabsTrigger value="trimestre">Faturamento por Trimestre</TabsTrigger>
          <TabsTrigger value="regiao">Faturamento por Região</TabsTrigger>
          <TabsTrigger value="publico">Público SP x RJ</TabsTrigger>
        </TabsList>

        <TabsContent value="trimestre">
          <Card className="mt-4">
            <CardContent>
              <ResponsiveContainer width="100%" height={400}>
                <BarChart data={dataTrimestrePagamento}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="trimestre" stroke="#203f75" />
                  <YAxis stroke="#203f75" tickFormatter={(v) => `R$${v / 1000}k`} />
                  <Tooltip formatter={(v) => `R$ ${v.toLocaleString()}`} />
                  <Legend />
                  <Bar dataKey="PIX" stackId="a" fill={cores.aqua1} />
                  <Bar dataKey="Credito" stackId="a" fill={cores.azul1} />
                  <Bar dataKey="Debito" stackId="a" fill="#96bfb9" />
                  <Bar dataKey="Dinheiro" stackId="a" fill="#ebebeb" />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="regiao">
          <Card className="mt-4">
            <CardContent>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={dataFaturamentoRegiao} layout="vertical">
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis type="number" stroke={cores.azul1} tickFormatter={(v) => `R$${v / 1000}k`} />
                  <YAxis type="category" dataKey="regiao" stroke={cores.azul1} />
                  <Tooltip formatter={(v) => `R$ ${v.toLocaleString()}`} />
                  <Legend />
                  <Bar dataKey="faturamento" fill={cores.aqua1} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="publico">
          <Card className="mt-4">
            <CardContent>
              <ResponsiveContainer width="100%" height={300}>
                <BarChart data={dataComposicaoSexo}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="uf" stroke={cores.azul1} />
                  <YAxis stroke={cores.azul1} />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="Masculino" stackId="a" fill={cores.azul1} />
                  <Bar dataKey="Feminino" stackId="a" fill={cores.aqua1} />
                </BarChart>
              </ResponsiveContainer>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}