"use client"

import dynamic from "next/dynamic";
import { ApexOptions } from "apexcharts";

const Chart = dynamic(() => import("react-apexcharts"), {
    ssr: false,
});

interface MessagesWidgetProps {
    messages: number[];
}

export default function MessagesWidget({
    messages,
}: MessagesWidgetProps) {
    const series = [
        {
            name: "Total Messages",
            data: messages,
        },
    ];

    const options: ApexOptions = {
        chart: {
            type: "bar",
            fontFamily: "inherit",
            height: 200,
            parentHeightOffset: 0,
            toolbar: {
                show: false,
            },
            animations: {
                enabled: false,
            },
        },

        plotOptions: {
            bar: {
                columnWidth: "50%",
            },
        },

        dataLabels: {
            enabled: false,
        },

        tooltip: {
            theme: "light",
        },

        grid: {
            padding: {
                top: -20,
                right: 0,
                left: -4,
                bottom: -4,
            },
            strokeDashArray: 4,
        },

        xaxis: {
            categories: [
                "January",
                "February",
                "March",
                "April",
                "May",
                "June",
                "July",
                "August",
                "September",
                "October",
                "November",
                "December",
            ],
            labels: {
                style: {
                    fontFamily: "inherit",
                },
            },
            tooltip: {
                enabled: false,
            },
            axisBorder: {
                show: false,
            },
        },

        yaxis: {
            labels: {
                style: {
                    fontFamily: "inherit",
                },
            },
        },

        colors: [
            "#008000",
        ],

        legend: {
            show: false,
        },
    };
    return (
        <div className="card">
            <div className="card-header">
                <h3 className="card-title">Monthly Messages</h3>
            </div>
            <div className="card-body">
                <Chart options={options} series={series} type="bar" height={320}/>
            </div>
        </div>
    )
}