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

interface TaskProps {
  name: string;
  checked?: boolean;
}

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 }: TaskProps) => {
  return (
    // Временное действие для тестирования
    <button onClick={() => alert(name)} class="w-full">
      <div class={classes.task}>
        <div class={taskStyle({ checked })}>
          <p class={markStyle({ checked })}>✓</p>
        </div>
        {name}
      </div>
    </button>
  );
};

export default Task;
