import { FunctionComponent } from "preact";
import { tv } from "tailwind-variants";
import classes from "./task.module.scss";

interface TaskProps {
  name: string;
  checked?: boolean;
  onClick?: () => void;
}

const taskStyle = tv({
  base: "flex aspect-square h-full flex-col items-center justify-center rounded-full border",
  variants: {
    checked: {
      true: "bg-black",
      false: "bg-white",
    },
  },
});

const markStyle = tv({
  base: "text-4xl font-light text-white",
  variants: {
    checked: {
      true: "block",
      false: "hidden",
    },
  },
});

const Task: FunctionComponent<TaskProps> = ({ name, checked = false, onClick = () => {} }: TaskProps) => {
  return (
    // Временное действие для тестирования
    <div class="w-[95%]">
      <div class={classes.task} onClick={onClick}>
        <div class={taskStyle({ checked })}>
          <p class={markStyle({ checked })}>✓</p>
        </div>
        {name}
      </div>
    </div>
  );
};

export default Task;