import Chip from "@mui/material/Chip";

export function FilterChip({ active, label, onClick }) {
  return (
    <Chip
      className={`filter-chip ${active ? "filter-chip--active" : ""}`}
      clickable
      label={label}
      onClick={onClick}
      size="small"
      sx={{
        height: "var(--status-height)",
        borderColor: active ? "var(--primary-border-strong)" : "var(--border)",
        backgroundColor: active ? "var(--primary-surface)" : "transparent",
        color: active ? "var(--text-primary)" : "var(--text-tertiary)",
        fontSize: "var(--admin-font-size)",
        "&:hover": {
          borderColor: "var(--primary-border-strong)",
          backgroundColor: active ? "var(--primary-surface-strong)" : "var(--primary-hover)"
        }
      }}
      variant="outlined"
    />
  );
}
