import React from "react";
import { PlayButtonProps } from "./types";

import { MaterialIcon } from "@shared/components/material-icon";

export const PlayButton: React.FC<PlayButtonProps> = ({
  isHovered: isOuterHovered,
  containerClassName,
}) => {
  return (
    <button
      tabIndex={-1}
      className={`group flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-xl transition-all duration-300 hover:scale-110 active:scale-95 ${containerClassName || ""}`}
      aria-label="Play button"
    >
      <MaterialIcon
        name="play_arrow"
        size={72 as any}
        fill={1}
        className={`max-w-[72px] transition-colors duration-300 ${
          isOuterHovered
            ? "text-text-brand"
            : "text-slate-500 group-hover:text-text-brand"
        }`}
      />
    </button>
  );
};