import React from 'react';
import LineChart from '../../charts/LineChart09';

// Import utilities
import { tailwindConfig } from '../../utils/Utils';

function FintechCard14() {

  const miniCharts = [
    // Twitter
    {
      data: [
        540, 466, 540, 466, 385, 432, 334,
        334, 289, 289, 200, 289, 222, 289,
        289, 403, 554, 304, 289, 270, 134,
        270, 829, 644, 688, 664,
      ],
      growth: true,
    },
    // Facebook
    {
      data: [
        245, 288, 332, 404, 404, 314, 314,
        314, 314, 314, 234, 314, 234, 234,
        314, 314, 314, 388, 314, 202, 202,
        202, 202, 514, 720, 642,
      ],
      growth: true,
    },
    // Google
    {
      data: [
        732, 610, 610, 504, 504, 504, 349,
        349, 504, 342, 504, 610, 391, 192,
        154, 273, 191, 191, 126, 263, 349,
        252, 323, 322, 270, 232,
      ],
      growth: false,
    },
    // Apple
    {
      data: [
        222, 222, 226, 271, 365, 365, 238,
        324, 288, 206, 324, 324, 500, 409,
        409, 273, 232, 273, 500, 570, 767,
        808, 685, 767, 685, 685,
      ],
      growth: true,
    },
    // Coinbase
    {
      data: [
        632, 510, 610, 404, 504, 404, 449,
        349, 404, 542, 404, 410, 491, 392,
        254, 273, 291, 191, 226, 363, 449,
        252, 223, 222, 170, 132,
      ],
      growth: false,
    },
  ];

  const chartData = [];

  const buildChartData = (chart) => {
    var obj = {
      labels: [
        '12-01-2020', '01-01-2021', '02-01-2021',
        '03-01-2021', '04-01-2021', '05-01-2021',
        '06-01-2021', '07-01-2021', '08-01-2021',
        '09-01-2021', '10-01-2021', '11-01-2021',
        '12-01-2021', '01-01-2022', '02-01-2022',
        '03-01-2022', '04-01-2022', '05-01-2022',
        '06-01-2022', '07-01-2022', '08-01-2022',
        '09-01-2022', '10-01-2022', '11-01-2022',
        '12-01-2022', '01-01-2023',
      ],
      datasets: [
        // Line
        {
          data: chart.data,
          borderColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500],
          borderWidth: 2,
          tension: 0,
          pointRadius: 0,
          pointHoverRadius: 3,
          pointBackgroundColor: chart.growth ? tailwindConfig().theme.colors.emerald[500] : tailwindConfig().theme.colors.rose[500],
          clip: 20,
        },
      ],      
    }    
    return obj;
  };
  
  miniCharts.map((miniChart) => {
    chartData.push(buildChartData(miniChart));
  });

  return (
    <div className="col-span-full bg-white shadow-lg rounded-sm border border-slate-200">
      <header className="px-5 py-4 border-b border-slate-100">
        <h2 className="font-semibold text-slate-800">Market Trends</h2>
      </header>
      <div className="p-3">
        {/* Table */}
        <div className="overflow-x-auto">
          <table className="table-auto w-full">
            {/* Table header */}
            <thead className="text-xs uppercase text-slate-400 bg-slate-50 rounded-sm">
              <tr>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Market</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Mkt Cap</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Chart</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Price</div>
                </th>
                <th className="p-2 whitespace-nowrap">
                  <div className="font-semibold text-left">Chg. (24h)</div>
                </th>
              </tr>
            </thead>
            {/* Table body */}
            <tbody className="text-sm font-medium divide-y divide-slate-100">
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap md:w-1/2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#1DA1F2" cx="18" cy="18" r="18" />
                      <path
                        d="M26 13.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H10c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z"
                        fill="#FFF"
                        fillRule="nonzero"
                      />
                    </svg>
                    <div>
                      <div className="text-slate-800 uppercase">Twtr</div>
                      <div className="text-xs text-slate-500">Twitter Inc.</div>
                    </div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="font-normal text-left">33.94B</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  {/* Chart built with Chart.js 3 */}
                  <div className="w-[96px]">
                    {/* Change the height attribute to adjust the chart height */}
                    <LineChart data={chartData[0]} width={96} height={32} />
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left">$43.07</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left text-emerald-500">+$4.20 (4%)</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap md:w-1/2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#1877F2" cx="18" cy="18" r="18" />
                      <path
                        d="M16.023 26 16 19h-3v-3h3v-2c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V16H23l-1 3h-2.72v7h-3.257Z"
                        fill="#FFF"
                        fillRule="nonzero"
                      />
                    </svg>
                    <div>
                      <div className="text-slate-800 uppercase">Fb</div>
                      <div className="text-xs text-slate-500">Meta Inc.</div>
                    </div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="font-normal text-left">903.71B</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  {/* Chart built with Chart.js 3 */}
                  <div className="w-[96px]">
                    {/* Change the height attribute to adjust the chart height */}
                    <LineChart data={chartData[1]} width={96} height={32} />
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left">$324.81</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left text-emerald-500">+$12.20 (3.7%)</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap md:w-1/2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#EA4335" cx="18" cy="18" r="18" />
                      <path
                        d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18Z"
                        fill="#FFF"
                        fillRule="nonzero"
                      />
                    </svg>
                    <div>
                      <div className="text-slate-800 uppercase">Googl</div>
                      <div className="text-xs text-slate-500">Alphabet Inc.</div>
                    </div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="font-normal text-left">1.70T</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  {/* Chart built with Chart.js 3 */}
                  <div className="w-[96px]">
                    {/* Change the height attribute to adjust the chart height */}
                    <LineChart data={chartData[2]} width={96} height={32} />
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left">$2,860.96</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left text-rose-500">-$12.20 (3.7%)</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap md:w-1/2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#1E293B" cx="18" cy="18" r="18" />
                      <path
                        d="M18.725 10.48C19.853 9.006 21.422 9 21.422 9s.233 1.384-.888 2.717c-1.197 1.424-2.557 1.191-2.557 1.191s-.256-1.12.748-2.429Zm-.605 3.398c.58 0 1.658-.79 3.06-.79 2.414 0 3.364 1.7 3.364 1.7s-1.858.94-1.858 3.221c0 2.573 2.314 3.46 2.314 3.46s-1.617 4.506-3.802 4.506c-1.003 0-1.783-.67-2.84-.67-1.078 0-2.147.695-2.843.695C13.52 26 11 21.725 11 18.29c0-3.381 2.133-5.155 4.134-5.155 1.3 0 2.31.743 2.986.743Z"
                        fill="#FFF"
                        fillOpacity=".9"
                        fillRule="nonzero"
                      />
                    </svg>
                    <div>
                      <div className="text-slate-800 uppercase">Aapl</div>
                      <div className="text-xs text-slate-500">Apple Inc.</div>
                    </div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="font-normal text-left">2.77T</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  {/* Chart built with Chart.js 3 */}
                  <div className="w-[96px]">
                    {/* Change the height attribute to adjust the chart height */}
                    <LineChart data={chartData[3]} width={96} height={32} />
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left">$168.55</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left text-emerald-500">+$7.44 (1.4%)</div>
                </td>
              </tr>
              {/* Row */}
              <tr>
                <td className="p-2 whitespace-nowrap md:w-1/2">
                  <div className="flex items-center">
                    <svg className="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                      <circle fill="#0052FF" cx="18" cy="18" r="18" />
                      <path
                        d="M18.12 13.894c1.673 0 3.002 1.016 3.506 2.528H25C24.389 13.19 21.679 11 18.146 11 14.135 11 11 13.998 11 18.013S14.055 25 18.146 25c3.454 0 6.216-2.19 6.828-5.449h-3.348c-.478 1.512-1.807 2.555-3.48 2.555-2.312 0-3.932-1.747-3.932-4.093 0-2.372 1.595-4.12 3.905-4.12Z"
                        fill="#FFF"
                        fillRule="nonzero"
                      />
                    </svg>
                    <div>
                      <div className="text-slate-800 uppercase">Coin</div>
                      <div className="text-xs text-slate-500">Coinbase Global Inc.</div>
                    </div>
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="font-normal text-left">50.89B</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  {/* Chart built with Chart.js 3 */}
                  <div className="w-[96px]">
                    {/* Change the height attribute to adjust the chart height */}
                    <LineChart data={chartData[4]} width={96} height={32} />
                  </div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left">$236.48</div>
                </td>
                <td className="p-2 whitespace-nowrap">
                  <div className="text-left text-rose-500">-$24,30 (6.2%)</div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default FintechCard14;