import React from 'react';
import { Menu, Trophy, HandHeart, ShoppingCart, Package, ChevronDown, Calendar, RefreshCcw } from 'lucide-react';

export default function Dashboard() {
return (
<div className="min-h-screen bg-[#0B1014] text-gray-100 font-sans max-w-md mx-auto flex flex-col">

  {/* Header */}  
  <header className="flex justify-between items-center p-5 border-b border-[#1A2227]">  
    <div className="flex items-center gap-4">  
      <Menu className="text-[#3A6B74] w-6 h-6 cursor-pointer" />  
      <div className="flex flex-col">  
        <span className="text-sm font-medium">👋 Olá Usuário,</span>  
        <span className="text-sm text-gray-400">seja bem vindo!</span>  
      </div>  
    </div>  
    <div className="flex flex-col items-end gap-1">  
      <span className="text-xs text-gray-300">R$ 0K / R$ 100k</span>  
      <div className="w-24 h-1.5 bg-[#1A2227] rounded-full overflow-hidden">  
        <div className="w-0 h-full bg-[#18363E]"></div>  
      </div>  
    </div>  
  </header>  

  <main className="p-5 flex-1">  
    {/* Subheader */}  
    <div className="mb-6">  
      <p className="text-[15px] text-gray-300 mb-5 leading-snug">  
        Trackeamento eficiente para seus anúncios no Kwai.  
      </p>  
      <div className="flex justify-between items-center">  
        <a href="#" className="text-sm text-gray-400 underline decoration-gray-500 underline-offset-4 hover:text-gray-200 transition-colors">  
          Precisa de ajuda?  
        </a>  
        <button className="bg-[#122A30] text-[#48A5B2] px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-[#16353D] transition-colors">  
          Sua Opinião importa  
        </button>  
      </div>  
    </div>  

    {/* Cards */}  
    <div className="flex flex-col gap-3.5 mb-8">  
      <Card   
        title="Vendas aprovadas"   
        value="R$ 0,00"   
        icon={<Trophy size={20} strokeWidth={1.5} />}   
        valueColor="text-[#68A057]"   
        iconColor="text-[#68A057]"   
      />  
      <Card   
        title="Pagos"   
        value="0"   
        icon={<HandHeart size={20} strokeWidth={1.5} />}   
        valueColor="text-[#68A057]"   
        iconColor="text-[#68A057]"   
      />  
      <Card   
        title="Adicionado ao carrinho"   
        value="0"   
        icon={<ShoppingCart size={20} strokeWidth={1.5} />}   
        valueColor="text-[#48A5B2]"   
        iconColor="text-[#48A5B2]"   
      />  
      <Card   
        title="Total de produtos"   
        value="0"   
        icon={<Package size={20} strokeWidth={1.5} />}   
        valueColor="text-[#48A5B2]"   
        iconColor="text-[#48A5B2]"   
      />  
    </div>  

    {/* Chart Section */}  
    <div className="border border-[#1A2227] rounded-xl p-5 bg-[#0D1317]">  
      <h2 className="text-[17px] text-gray-200 mb-4">Pixels marcados</h2>  
        
      <div className="flex flex-col gap-3.5 mb-4">  
        <div className="relative">  
          <select className="w-full bg-[#0B1014] border border-[#1A2227] rounded-lg p-3.5 text-[15px] text-gray-300 appearance-none outline-none focus:border-[#48A5B2]">  
            <option>Todos os produtos</option>  
          </select>  
          <ChevronDown className="absolute right-4 top-4 w-4 h-4 text-gray-500 pointer-events-none" />  
        </div>  
          
        <div className="relative">  
          <select className="w-full bg-[#0B1014] border border-[#1A2227] rounded-lg p-3.5 text-[15px] text-gray-300 appearance-none outline-none focus:border-[#48A5B2]">  
            <option>GMT-03:00 (Brazil)</option>  
          </select>  
          <ChevronDown className="absolute right-4 top-4 w-4 h-4 text-gray-500 pointer-events-none" />  
        </div>  
      </div>  

      <div className="flex gap-3 mb-8">  
        <div className="flex-1 flex items-center bg-[#0B1014] border border-[#1A2227] rounded-lg p-3.5 text-[14px] text-gray-300">  
          <Calendar className="w-4 h-4 text-[#3A6B74] mr-3" />  
          01 mai - 31 mai 2026  
        </div>  
        <button className="bg-[#122A30] text-[#48A5B2] px-5 py-3.5 rounded-lg flex items-center justify-center gap-2 text-sm font-medium hover:bg-[#16353D] transition-colors">  
          <RefreshCcw className="w-4 h-4" />  
          Atualizar  
        </button>  
      </div>  

      {/* Chart Y-Axis Placeholder */}  
      <div className="flex flex-col gap-5 text-xs text-gray-500 font-medium pb-2">  
        <div className="flex items-center gap-3">  
          <span className="w-8 text-right">R$10</span>  
          <div className="flex-1 border-t border-[#1A2227] border-dashed"></div>  
        </div>  
        <div className="flex items-center gap-3">  
          <span className="w-8 text-right">R$9</span>  
          <div className="flex-1 border-t border-[#1A2227] border-dashed"></div>  
        </div>  
        <div className="flex items-center gap-3">  
          <span className="w-8 text-right">R$8</span>  
          <div className="flex-1 border-t border-[#1A2227] border-dashed"></div>  
        </div>  
      </div>  
    </div>  
  </main>  
</div>  

);
}

// Reusable Card Component
function Card({ title, value, icon, valueColor, iconColor }) {
return (
<div className="bg-[#0D1317] border border-[#1A2227] rounded-xl p-4 flex justify-between items-center hover:border-[#2A353C] transition-colors">
<div className="flex flex-col gap-1.5">
<p className="text-gray-300 text-[15px]">{title}</p>
<p className={text-[17px] font-medium ${valueColor}}>{value}</p>
</div>
<div className={${iconColor}}>
{icon}
</div>
</div>
);
}