import {
  Box,
  HStack,
  // Image, Input, Stack, 
  Text
} from "@chakra-ui/react";
// import React, { useState, useEffect } from "react";
import { Button } from "../../components/ui/button";
// import { IoAddSharp } from "react-icons/io5";
// import delateIcon from "../../assets/deleteIcon.png";
// import { FaClockRotateLeft } from "react-icons/fa6";
import { Link } from "react-router-dom";
import { AgencyList } from "../../Redux/Service/dashBoard";

// interface Todo {
//   id: number;
//   text: string;
//   completed: boolean;
//   timestamp: string;
// }

const AgencyName = ({ agencyList }: { agencyList: AgencyList }) => {
  // const [todos, setTodos] = useState<Todo[]>([]);
  // const [input, setInput] = useState<string>("");


  // const getCurrentTime = () => {
  //   const now = new Date();
  //   return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
  // };


  // const addTodo = () => {
  //   if (input.trim() === "") return;
  //   setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]);
  //   setInput("");
  // };

  // Delete a task
  // const deleteTodo = (id: number) => {
  //   setTodos(todos.filter((todo) => todo.id !== id));
  // };

  // useEffect(() => {
  //   const savedTodos = localStorage.getItem("todos");
  //   if (savedTodos) {
  //     setTodos(JSON.parse(savedTodos));
  //   }
  // }, []); // Runs only on mount

  // // 🔹 Save todos to localStorage whenever they change
  // useEffect(() => {
  //   if (todos.length > 0) {
  //     localStorage.setItem("todos", JSON.stringify(todos));
  //   }
  // }, [todos]); // Runs when `todos` changes


  return (
    <Box p={"10px"}>
      <HStack justifyContent={"space-between"} mb={5}>
        <Text fontSize={"xs"} fontWeight={500}>
          Agency List
        </Text>
        {/* <Button
          bg={"#fff"}
          color={"#222222CC"}
          px={3}
          fontSize={"12px"}
          h={"28px"}
          onClick={addTodo}
        >
          <IoAddSharp /> Add
        </Button> */}
        <Button
          bg={"#fff"}
          color={"#222222CC"}
          px={3}
          fontSize={"12px"}
          h={"28px"}
        >
          <Link to="/master-module/agency-master">View ALL</Link>
        </Button>
      </HStack>
      {/* <Input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a task..."
        backgroundColor={"#fff"}
        size={"sm"}
        w={"100%"}
        p={2}
        mb={4}
      /> */}
      {agencyList?.data.map((todo) => (
        <HStack key={todo.id} backgroundColor={"#fff"} rounded={5} mb={3} p={4} justifyContent={'space-between'} alignItems={'inherit'}>
          <Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.name}</Text>
          {/* <Stack display={'flex'} alignItems={'end'} w={'130px'}>
            <Box display={'flex'} alignItems={'center'} gap={2}>
              <FaClockRotateLeft fontSize={'10px'} style={{ fontSize: '13px', color: '#222222bd' }} />
              <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
            </Box>
            <Box
              onClick={() => deleteTodo(todo.id)}
              bg={"none"}
              color={"#22222299"}
              cursor={'pointer'}
            >
              <Image w={"16px"} src={delateIcon} />
            </Box>
          </Stack> */}
        </HStack>
      ))}
    </Box>
  );
};

export default AgencyName;
