import { authClient } from '@lib/auth-client';
import { m } from '@paraglide/messages';
import { GearIcon, PenIcon } from '@phosphor-icons/react';
import { Card, CardContent, CardHeader, CardTitle } from '@ui/card';
import { Button } from '../ui/button';
import DeleteUserHouseAction from './delete-user-house-dialog';
import EditHouseAction from './edit-house-dialog';

type CurrentUserActionGroupProps = {
  oneHouse: boolean;
  activeHouse: ReturnType<typeof authClient.useActiveOrganization>['data'];
};

const CurrentUserActionGroup = ({
  oneHouse,
  activeHouse,
}: CurrentUserActionGroupProps) => {
  return (
    <Card className="col-span-1">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <GearIcon />
          {m.houses_user_page_block_action_title()}
        </CardTitle>
      </CardHeader>
      <CardContent className="flex flex-row gap-2">
        <EditHouseAction data={activeHouse as HouseWithMembers} isPersonal>
          <Button
            type="button"
            size="icon-lg"
            className="rounded-full cursor-pointer bg-blue-500 text-white hover:bg-blue-100 hover:text-blue-600"
          >
            <PenIcon size={16} />
            <span className="sr-only">{m.ui_edit_house_btn()}</span>
          </Button>
        </EditHouseAction>
        {!oneHouse && <DeleteUserHouseAction activeHouse={activeHouse} />}
      </CardContent>
    </Card>
  );
};

export default CurrentUserActionGroup;