"use client";

import Box from "@mui/material/Box";
import InputAdornment from "@mui/material/InputAdornment";
import OutlinedInput from "@mui/material/OutlinedInput";
import { alpha, useTheme } from "@mui/material/styles";

import SearchIcon from "@mui/icons-material/Search";

import { AppButton } from "@/components/ui/button";

type StakeholderHeaderActionsProps = {
  searchTerm: string;
  onSearchChange: (value: string) => void;
  onAddStakeholder: () => void;
};

export function StakeholderHeaderActions({
  searchTerm,
  onSearchChange,
  onAddStakeholder,
}: StakeholderHeaderActionsProps) {
  const theme = useTheme();
  const isDark = theme.palette.mode === "dark";

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 1.5,
        flexDirection: { xs: "column", sm: "row" },
        width: { xs: "100%", sm: "auto" },
      }}
    >
      <OutlinedInput
        size="small"
        value={searchTerm}
        onChange={(event) => onSearchChange(event.target.value)}
        placeholder="Search"
        startAdornment={
          <InputAdornment position="start">
            <SearchIcon
              sx={{
                fontSize: 18,
                color: isDark ? alpha("#ffffff", 0.6) : "#6B7280",
              }}
            />
          </InputAdornment>
        }
        sx={{
          width: { xs: "100%", sm: 182 },
          height: 40,
          borderRadius: "8px",
          backgroundColor: isDark ? alpha("#ffffff", 0.04) : "#ffffff",
          fontSize: 13,
          flexShrink: 0,
          "& .MuiInputBase-input": {
            py: 0.75,
          },
        }}
      />

      <AppButton
        onClick={onAddStakeholder}
        sx={{
          width: { xs: "100%", sm: "auto" },
        }}
      >
        Add Stakeholder
      </AppButton>
    </Box>
  );
}