<template>
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-2xl font-bold">Market Price Trends</h1>
      <div class="text-sm breadcrumbs">
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li>Market Trends</li>
        </ul>
      </div>
    </div>

    <!-- Main Chart Section -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <div class="lg:col-span-3">
        <PricingHistoryChart :initial-days="30" />
      </div>
      
      <!-- Side Info / Legend -->
      <div class="card bg-base-100 shadow-xl h-fit">
        <div class="card-body">
          <h2 class="card-title text-sm opacity-70 mb-4">Market Indices</h2>
          
          <div class="space-y-4">
            <div class="flex items-center gap-3">
              <div class="w-3 h-3 rounded-full bg-red-500"></div>
              <div>
                <p class="font-bold text-sm">Heating Oil (HO)</p>
                <p class="text-xs opacity-50">NY Harbor ULSD</p>
              </div>
            </div>
            
            <div class="flex items-center gap-3">
              <div class="w-3 h-3 rounded-full bg-blue-500"></div>
              <div>
                <p class="font-bold text-sm">Crude Oil (CL)</p>
                <p class="text-xs opacity-50">WTI Crude</p>
              </div>
            </div>
            
            <div class="flex items-center gap-3">
              <div class="w-3 h-3 rounded-full bg-green-500"></div>
              <div>
                <p class="font-bold text-sm">Gasoline (RB)</p>
                <p class="text-xs opacity-50">RBOB Gasoline</p>
              </div>
            </div>
          </div>
          
          <div class="divider my-4"></div>
          
          <p class="text-xs text-base-content/50">
            Data sourced from global market indices. Updates every 5 minutes.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import PricingHistoryChart from '../../components/PricingHistoryChart.vue';
</script>
