"use client";
import React, { useEffect } from "react";
import DateRangePicker from "@/components/date-range-picker";
import { usePathname } from "@/components/navigation";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./ui/dialog";
import { Button } from "./ui/button";
import { Label } from "./ui/label";
import { Input } from "./ui/input";

const PageTitle = ({
  title,
  className,
}: {
  title?: string;
  className?: string;
}) => {
  const pathname = usePathname();
  const name = pathname?.split("/").slice(1).join(" ");
  const roleId = getCookiesDecrypt("urie");

  useEffect(() => {
    console.log("role", roleId);
  }, [roleId]);
  return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
    ""
  ) : (
    <div
      className={cn(
        "flex flex-wrap gap-4 items-center justify-between",
        className
      )}
    >
      <div className="text-2xl font-medium text-default-800 capitalize">
        Dashboard
      </div>
      <Dialog>
        <DialogTrigger asChild>
          <Button variant="outline">Download Report</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Download Report</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="w-full">
              <Label>Date</Label>
              <Input
                type="date"
                // value={dateFilter}
                // onChange={(e) => setDateFilter(e.target.value)}
                className="w-full"
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              type="submit"
              // onClick={downloadReport}
            >
              Download
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default PageTitle;